CODEWITHSUNDEEP
htmlcsscss-selectors
Don P
Don P

Reputation: 63768

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

I want to assign seperate colors to each <td>. One solution is to use classes, but I don't want to crowd the HTML if a simple CSS selector solution exists.

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}

Upvotes: 6

Views: 233

Answers (2)

j08691
j08691

Reputation: 208032

Use CSS's nth-child 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

Upvotes: 9

Explosion Pills
Explosion Pills

Reputation: 191819

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

http://jsfiddle.net/ayTmy/

Upvotes: 5

Related Questions