What is nth-child in CSS

nth-child :

The nth-child CSS pseudo-selectors allow you to target the 3rd or 7th or nth element in a list. Another use would be to style odd and even rows in a table differently. The alternative is to add a class specifically to the list-item you want to style differently, but that’s not very flexible. The nth-child syntax looks like this:

1	ul li:nth-child(3) {

2	background: blue

3

}

The above would select the 3rd item in the list and give it a blue background

1	ul li:nth-child(3n+3) {

2	background: blue

3

}

Similarly the code above would style every 3rd list item with a blue background

Unfortunately no current version of IE supports it. However there is a way to simulate the 1st bit of code above for IE7 and IE8.

1	ul > li:nth-child(3) is the same as ul > *:first-child + * + *

The code above will also target the 3rd element in the list in a way that IE7 and 8 understand. Not quite as useful as being able to use (3n+3) to target every 3rd list-item, but better than nothing. Hopefully IE9 will support nth-child.