Paulund

July 18, 2011 in Css Basics

How To Use CSS :nth-child

There is a CSS selector which allows you to select the exactly item that you want from a list. This selector is the :nth-child selector, in this tutorial you will learn what you can do with the :nth-child and how it can be helpful. The CSS nth-child selector allows you to select a group of elements with the same selectors. This is most commonly used to select the odd or even elements in a group of elements with the same selectors. The most common use for this is styling a table as zebra colour row, this is when you just style the odd rows in the table.

tr:nth-child(odd)
{
    // background color
}

tr:nth-child(even)
{
    // another background color
}

The nth-child selector also allows you to specify a number of elements in a group and then select a single element in each group by using the syntax.

tr:nth-child(an+b)
{

}

an define the amount of elements in the group, followed by the +b which will define which element you are selecting in that group. If I used the values of 2n+1 then the selector will split the elements into groups of 2 and return the first element in each of these groups, ie the odd numbered elements. If I used the values 2n+2 the selector splits the elements into groups of 2 but then returns the 2nd element in each group, ie the even numbered elements. For another example so we can understand the nth-child selector we are going to select ever 4th element so element 4, element 8, element 12, element 16. To do this we are going to split the elements into groups of 4 and then return the 4th element.

tr:nth-child(4n+4)
{
    // style ever 4th element
}

Below is a list which has 10 list items in it, we are going to use :nth-child, :first-child and :last-child to select the items we want to highlight.

Use CSS :nth-child To Select Exact Item

By passing a number to the nth-child function you can define which child to return from the selector group.

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 10

.selector_example li:nth-child(4){
     font-size:150%;
     font-weight:bold;
     color:green;
}

Use CSS :nth-child To Select All But the First 5 Items

By passing in a n+ number into the nth-child selector you can make it pick all elements from this number.

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 10

.selector_example2 li:nth-child(n+6){
     font-size:150%;
     font-weight:bold;
     color:green;
}

Use CSS :nth-child To Select Only First 5 Items

By passing in a negative n+ a number you make it return all element before this number.

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 10

.selector_example li:nth-child(-n+5){
     font-size:150%;
     font-weight:bold;
     color:green;
}

Use CSS :nth-child To Select Every 3rd Item

nth-child can be used to return a sequence of numbers by saying how many are in the sequence 3n+1 then it will go to every 3rd element.

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 10

.selector_example li:nth-child(3n+1){
     font-size:150%;
     font-weight:bold;
     color:green;
}

Use CSS :nth-child To Select Only Odd Items

You can pass it an odd parameter which will select all the element which have an odd index. So it will return all elements at position 1, 3, 5, 7, 9 etc. This functionality is very useful for defining the colour of alternative table rows.

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 10

.selector_example li:nth-child(odd){
     font-size:150%;
     font-weight:bold;
     color:green;
}

Use CSS :nth-child To Select Only Even Items

This example shows the same as above but for all the even numbers. For example it will return all elements at position 2, 4, 6, 8, 10 etc.

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 10

.selector_example li:nth-child(even){
     font-size:150%;
     font-weight:bold;
     color:green;
}

Use CSS :first-child To Select First Item

Alternative CSS selectors is the first-child which will crazy enough return the first child.

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 10

.selector_example li:first-child{
     font-size:150%;
     font-weight:bold;
     color:green;
}

Use CSS :last-child To Select Last Item

Alternative to the first-child selector is the last-child selector which of course will return the last child in the element group.

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 10

.selector_example li:last-child{
     font-size:150%;
     font-weight:bold;
     color:green;
}

Use CSS :nth-last-child To Select Second From Last Item

You can also use the last-child to start the selection from the end, just by using the nth-last-child selector. This will return the child starting from the end of the group.

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 10

.selector_example li:nth-last-child(2){
     font-size:150%;
     font-weight:bold;
     color:green;
}