nth-child classes !!

drwebsitesuk · May 14, 2014

HI Everyone !

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

thanks in advance

webdesign · May 14, 2014

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

Code:

<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:

Code:

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

then Li number 8 will have red background

Code:

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

then last Li (number 12) will have green background

Code:

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 · May 15, 2014

wow really nice and easy. thanks dude

hudafaeq · May 15, 2014

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

nth-child classes !!

drwebsitesuk

Member

webdesign

Well-known member

drwebsitesuk

Member

webdesign

Well-known member

hudafaeq

New member

Latest posts New threads

Latest posts

New threads

Latest Hosting Offers New Reviews

Latest hosting offers

Popular Contributors - Past 30 Days

Sponsors

Tag Cloud