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
11,078
Replies
9
Views
6,676
Replies
6
Views
3,597
Replies
9
Views
9,489
Newer Threads
Replies
6
Views
3,161
Replies
8
Views
3,732
Replies
1
Views
2,242
Replies
7
Views
4,586
Replies
11
Views
4,306
Latest Threads
Replies
1
Views
27
Replies
0
Views
193
Replies
1
Views
40
Replies
2
Views
83

Latest postsNew threads

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