CSS Pseudo classes

 Pseudo classes

In this article ,we will learn about the common pseudo classes which are used in the CSS language during designing the web development.

:first-child()

:last-child()

:nth-child()

:nth-last-child

:nth-last-type-child

:nth-of-type

:only-child

:only-of-type

:last-of-type

:first-of-type

:empty

:not()

First-child()

In the following example,selectors match all the first child of div section

div.box1 p:first child{

color:blue;

}

<div class=”box1”>

<p>programgrab1</p>

<p>programgrab2</p>

<div class=”box2”>

<p>programgrab1</p>

<p>programgrab2</p>

</div></div>

last-child()

In the following example,selectors match all the last child<p> of div section

div.box1 p:last child{

color:blue;

}

<div class=”box1”>

<p>programgrab1</p>

<p>programgrab2</p>

<div class=”box2”>

<p>programgrab1</p>

<p>programgrab2</p>

</div></div>

nth-child()

In the following example,selectors match the selective number that is one of  child<p> of div section

div.box1 p:nth-child(1){

color:blue;

}

<div class=”box1”>

<p>programgrab1</p>

<p>programgrab2</p>

<div class=”box2”>

<p>programgrab1</p>

<p>programgrab2</p>

</div></div>

nth-last-child

In the following example,selectors match the selective number that is one of  child<p> of div section

div.box1 p:nth-last-child(1){

color:blue;

}

<div class=”box1”>

<p>programgrab1</p>

<p>programgrab2</p>

<div class=”box2”>

<p>programgrab1</p>

<p>programgrab2</p>

</div></div>

nth-last-type-child

In a similar way of nth-last-child,nth-last-type-child work but check the type of child instead of a number of children.

nth-of-type

In the similar way of nth-child,nth-type-child work but check the type of child instead of number of child.

only-child

In the following example,selectors match the single  child of div section that is programgrab3. 

div p:only-child{

color:blue;

}

<div class=”box1”>

<h3>heading</h3>

<p>programgrab1</p>

<p>programgrab2</p>

<div class=”box2”>

<p>programgrab3</p>

</div><.div>

only-of-type

In the following example,selectors match the single type  of  child of div section that is h3 . 

div.box1 p:only-of-type{

color:blue;

}

<div class=”box1”>

<h3>heading</h3>

<p>programgrab1</p>

<p>programgrab2</p>

<div class=”box2”>

<p>programgrab1</p>

<p>programgrab2</p>

</div></div>

last-of-type

In the following example,selectors match the last type of <p> child of div section

div.box1 p:last-of-type{

color:blue;

}

<div class=”box1”>

<p>programgrab1</p>

<p>programgrab2</p>

<div class=”box2”>

<p>programgrab1</p>

<p>programgrab2</p>

</div></div>

First-of-type

In the following example,selectors match all the first type of <p> child of div section

div.box1 p:first-of-type{

color:blue;

}

<div class=”box1”>

<p>programgrab1</p>

<p>programgrab2</p>

<div class=”box2”>

<p>programgrab1</p>

<p>programgrab2</p>

</div></div>

Empty

The empty select any of tag of HTML is empty or not.

Not

The not select the tag which you want not to select and all the other tags are selected.

: