# 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.

- one
- two
- three
- four
- five

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