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,288
Replies
9
Views
6,015
Replies
6
Views
3,380
Replies
9
Views
8,913
Newer Threads
Replies
6
Views
2,920
Replies
8
Views
3,522
Replies
1
Views
2,084
Replies
7
Views
4,373
Replies
11
Views
3,979
Recommended 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