CSS: I want to target each child separately in a container

Question

I want to assign separate colors for each <td> . One solution is to use classes, but I don't want to interpret HTML if there is a simple CSS selector solution.

HTML:

 <tr> <td>Item 1</td> <td>Item 2</td> <td>Item 3</td> <td>Item 4</td> </tr> 

CSS:

 /* item #1 */ {color: red} /* item #2 */ {color: blue} /* item #3 */ {color: green} 

Answer 1

Use nth-child CSS selector:

 td:nth-child(1) { color:blue; } td:nth-child(2) { color:red; } td:nth-child(3) { color:brown; } td:nth-child(4) { color:green; } 

JsFiddle example

Answer 2

You can use the nth-child selector to specify a specific element (counting from 1): td:nth-child(1) { color: red; } td:nth-child(1) { color: red; }

http://jsfiddle.net/ayTmy/