nth-child classes !!

drwebsitesuk

Member
Registered
Joined
May 14, 2014
Messages
41
Points
0
HI Everyone !

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

thanks in advance
 

webdesign

Well-known member
Joined
Jul 5, 2012
Messages
120
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
 

drwebsitesuk

Member
Registered
Joined
May 14, 2014
Messages
41
Points
0
wow really nice and easy. thanks dude
 

webdesign

Well-known member
Joined
Jul 5, 2012
Messages
120
Points
0
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

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
 
Older Threads
Replies
26
Views
10,940
Replies
9
Views
6,548
Replies
6
Views
3,573
Replies
9
Views
9,392
Newer Threads
Replies
6
Views
3,131
Replies
8
Views
3,713
Replies
1
Views
2,227
Replies
7
Views
4,551
Replies
11
Views
4,239
Latest Threads
Recommended Threads
Replies
2
Views
3,115
Replies
3
Views
1,206
Replies
5
Views
2,335
Replies
7
Views
5,375

Latest Hosting OffersNew Reviews

Sponsors

Tag Cloud

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