Posted By

michellebracken on 08/18/11


Tagged


Versions (?)

nth-child


 / Published in: CSS
 

The nth-childCSS 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:

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

Similarly that code 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.

The last code 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. Another and perhaps more practical solution currently is to use jQuery, which supports all CSS3 selectors.

  1. 1 ul li:nth-child(3) {
  2. 2 background: blue
  3. 3 }
  4.  
  5.  
  6. 1 ul li:nth-child(3n+3) {
  7. 2 background: blue
  8. 3 }
  9.  
  10.  
  11. 1 ul > li:nth-child(3) is the same as ul > *:first-child + * + *

Report this snippet  

You need to login to post a comment.