nth-child classes !!

[drwebsitesuk]

HI Everyone !

How to use nth-child, first-child and last-child classes in css ?

thanks in advance

 

[webdesign]

To know about nth-child, first-child and last-child classes in css, we can see the example, it will be easier to understand.

<ul>
	<li><span></span></li>
	<li><span></span></li>
	<li><span></span></li>
	<li><span></span></li>
	<li><span></span></li>
	<li><span></span></li>
	<li><span></span></li>
	<li><span></span></li>
	<li><span></span></li>
	<li><span></span></li>
	<li><span></span></li>
	<li><span></span></li>
</ul>

Css code:

li:nth-child(8) span {
    background-color: red;   
}

then Li number 8 will have red background

li:nth-last-child span {
    background-color: green;   
}

then last Li (number 12) will have green background

li:nth-first-child span {
    background-color: black;   
}

then Li number 1 will have black background

Sometimes, I used to use this technique to identify exact classes that I want to make it in style

 

[drwebsitesuk]

wow really nice and easy. thanks dude

 

[webdesign]

webdesign

you are welcome, it has some cases more but it's advanced so you can search to find additional information. Also, don't hesitate to share your questions on forum, I'm interested in discussing about web design field

 

[hudafaeq]

Define nth span code in css or Search on google for tutorial I am sure you will found many