css3 pseudo-class selector :nth-child(), first-of-type, etc.

CSS3 has added comprehensive support allowing you to style odd or even rows or even every 3rd, 4th, 5th or user defined number of rows and other repeating elements such as list items, paragraphs and images, too.

Alternate table row styling

Name Cards sent Cards received Cards written but not sent
Ann 40 28 4
Joe 2 27 29
Paul 5 35 2
Louise 65 65 0

Odd or Even Rows, List Items

tr:nth-child(odd) td { color: #86B486;}

li:nth-child(even) { color: #86B486;}

Very simple to select odd rows with CSS3 as you can see above example or list items by adding a margin and changing the colour of odd or even list-items.

Every 3rd Row (3n for every third, -2 to start from imaginary negative 2 rows before the first row

.names tr:nth-child(3n-2) { background-color: #CC9;}

name Jane
email jane@pasadena.edu
phone x7001
name Joe
email joe@pasadena.edu
phone x7002
name John
email john@pasadena.edu
phone x7003
name Julie
email julie@pasadena.edu
phone x7004

first-of-type to style the lead paragraphs

p:first-of-type { font: bold 1.2em "Trebuchet MS", Arial, Helvetica, sans-serif;}

nth-child has limited browser support. It is not supported in Internet Explorer 8 or Opera. Firefox 3.5 and Safari 3.1 do have support.

In some situations however, you might want to consider using JavaScript to add this support to browsers that don’t have it. JQuery is used in this example

 

Tutorials:

Based on: http://24ways.org/2009/cleaner-code-with-css3-selectors

http://inspectelement.com/tutorials/a-look-at-some-of-the-new-selectors-introduced-in-css3/
http://www.456bereastreet.com/archive/200601/css_3_selectors_explained/

Browser Chart: Selectors

http://www.css3.info/modules/selector-compat/

http://www.css3.info/selectors-test/test.html