CSS: Ich möchte jedes Kind separat in einem Container ansprechen

Question

Ich möchte jedem <td> separate Farben zuweisen. Eine Lösung besteht darin, Klassen zu verwenden, aber ich möchte den HTML-Code nicht überladen, wenn eine einfache CSS-Selektorlösung existiert.

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

Verwenden CSS nth-child Selektor:

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

Sie können den nth-child Selektor verwenden, um ein bestimmtes Element zu bestimmen (von 1 gezählt): td:nth-child(1) { color: red; }

http://jsfiddle.net/ayTmy/