CSS Selectors: A tool for targeting the right html element.

What are CSS Selectors?

CSS selectors are an important part of the CSS file. CSS Selector as the name specifies is used to select the HTML elements. They are used to target and specify style properties to the targeted elements. The targeted element is called as the subject of the selector.

Types of CSS Selectors

They can be categorized into 5 types as,

Universal Selector
Simple Selectors
Combinators Selectors
Pseudo-Classes and Pseudo-Elements Selectors
Attribute Selectors

1.Universal Selector:

Before taking up the above tag,we need to know about the most important 'Universal Tag'. It is one that controls the browser view and removes the additional properties added by the user's browser as per the default configuration set.

It is done by "" *(asterisk) symbol and filters the properties as below:

*{
margin: 0;
padding: 0;
color: #ff6263 ;
outline:0;
}

As above you can also use this to select the background image for your page.

2.Simple Selectors:

They are simple to write,target and specify properties to one element at a time. They can be used to target id,class,name,headings,paragraphs and other tags.

Let's look at one by one, The id selector as below is targeted by "#" symbol. The below code snippet targets and aligns text of id='one' to center of block.

#one{
    text-align:center;
}

<p id="one">This text is at center</p>

The class selection is through a '.' (dot) symbol followed by class name.


.center{
    text-align:cecnter:
}

<p class="center">This text is at center</p>

The heading can be selected directly as tag without any special character.

h1{
    color:red;
}

The body can be targeted as,

body{
    background-color:black;
    color:white;
}

3.Combinators Selectors:

They are used to select combinations of elements like classes,headings,paragraphs etc. They are an extension of simple selectors.

The elements here are separated by commas. The tags with another tag can be targeted by parent tag followed by sibling or child tag.

A.Descendant Combinator:

Consider there is a paragraph under the list of main tags. Then we target as,

main ul p{
    font-size:large:
    color:red
}

<p>This is a paragraph </p>

Consider we have to give properties to 3 classes at once,

.box1,.box2,.box3{
            color:red;
            width: 100px;
        }

<div class="box1">This is first box</div>
    <div class="box2">This is second box</div>
    <div class="box3">This is third box</div>

Now,consider 3 elements at once,

.h2,p,span{
            color: blueviolet;
        }

<h1>This is heading1</h1>
    <h2>This is haeding2</h2>
    <p>This is a paragraph</p>
    <span>This is a span</span>

B.Child Combinator:

Below is child combinator which targets the direct child as paragraph of main body as, main>p{}

C.Adjacent Sibling Selector Combinator:

It targets only the elements specified selector which are immediate siblings of the first selector.

Say we want to set the size of image preceding paragraph as larger then,

p + img{}

D.General Sibling Combinator:

Now,say if we want to make all images as larger then we can do as,

p ~ img {}

The disadvantage with combined selectors is that, if there is invalid syntax,the style will be ignored for all elements,which in simple selectors will affect only the syntactically invalid target.

4.Pseudo-Classes and Pseudo-Elements Selectors:

It is used to assign style properties to particular part of element rather than the whole element.It is also used to specify special state of elements like hover,mouse over,select link etc.

The basic syntax of it is,

selector: pseudo-class{
        property: value
   }

Let's take an example,

a:focus{
   color: #ffffff;
}

a:hover{
   cursor:pointer;
}

Now,Say we want to style the first line of the div,the first paragraph of the div etc.,then:

article p:first child{
  font-size: 50px;
  color: red;
}

p*:first child{
   font-size: 50px;
  color: red;
}

5.Attribute Selector:

These are used to target and specify the element with specific attributes defined in them or their attributes value.

That is the element is target with respect to attributes or values within it.

In the below example,say we need to select an element with attribute title=bold and increase its size.

[title:bold]:{
   font-size: 68px;
}

The below code snippet selects element with attribute type=bold and increases its font weight.

a[type=bold]{
   font-weight: bold;
}

Test Blog