nth-child classes !!

drwebsitesuk

New member
Joined
May 14, 2014
Messages
94
Points
0
HI Everyone !

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

thanks in advance
 

webdesign

New member
Joined
Jul 5, 2012
Messages
232
Points
0
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
 

hudafaeq

New member
Joined
May 9, 2014
Messages
11
Points
0
Define nth span code in css or Search on google for tutorial I am sure you will found many
 
Newer threads
Replies
9
Views
3,820
Replies
6
Views
3,075
Replies
8
Views
5,766
Replies
9
Views
4,412
Replies
1
Views
2,128
Latest threads
Replies
1
Views
22
Replies
2
Views
131
Replies
1
Views
192
Replies
6
Views
445
Replies
11
Views
549

Latest postsNew threads

Referral contests

Referral link for :

Sponsors

Popular tags

You are using an out of date browser. It may not display this or other websites correctly.
You should upgrade or use an alternative browser.

Top