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.
By passing a number to the nth-child function you can define which child to return from the selector group.
.selector_example li:nth-child(4){
font-size:150%;
font-weight:bold;
color:green;
}
By passing in a n+ number into the nth-child selector you can make it pick all elements from this number.
.selector_example2 li:nth-child(n+6){
font-size:150%;
font-weight:bold;
color:green;
}
By passing in a negative n+ a number you make it return all element before this number.
.selector_example li:nth-child(-n+5){
font-size:150%;
font-weight:bold;
color:green;
}
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.
.selector_example li:nth-child(3n+1){
font-size:150%;
font-weight:bold;
color:green;
}
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.
.selector_example li:nth-child(odd){
font-size:150%;
font-weight:bold;
color:green;
}
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.
.selector_example li:nth-child(even){
font-size:150%;
font-weight:bold;
color:green;
}
Alternative CSS selectors is the first-child which will crazy enough return the first child.
.selector_example li:first-child{
font-size:150%;
font-weight:bold;
color:green;
}
Alternative to the first-child selector is the last-child selector which of course will return the last child in the element group.
.selector_example li:last-child{
font-size:150%;
font-weight:bold;
color:green;
}
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.
.selector_example li:nth-last-child(2){
font-size:150%;
font-weight:bold;
color:green;
}
To read further into the nth-child selector and to stay updated with any changes made to it you can view the changes on the CSS documentation page. CSS nth-child Selector