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.







:


Comments

  1. Admin,I am absolutely here on this great website. This is my favorite website. Sharing articles are good and helpful. We are waiting read your more post in future. Thanks for sharing your great ideas and helpful articles. https://mobileapk.net

    ReplyDelete

Post a Comment

Hire a programmer

Popular posts from this blog

CSS selector

C program to convert decimal to binary number

C Program to convert binary to decimal number