CODEWITHSUNDEEP
css
tony noriega
tony noriega

Reputation: 7663

CSS nth child - First TD in each row, alternate color?

Hopefully I can explain what I am trying to do.

In a table. The first TD in each row should alternate color.

Is this possible using nth child?

Ive tried a few things, but cant seem to logically wrap my head around this one.

(trying to expand my horizons)

<tr>
  <td>#0068b3</td>
  <td>#fff</td>
  <td>#fff</td>
</tr>
<tr>
  <td>#aebde1</td>
  <td>#fff</td>
  <td>#fff</td>
</tr>
<tr>
  <td>#0068b3</td>
  <td>#fff</td>
  <td>#fff</td>
</tr>
<tr>
  <td>#aebde1</td>
  <td>#fff</td>
  <td>#fff</td>
</tr>

Upvotes: 1

Views: 3006

Answers (2)

Josh Crozier
Josh Crozier

Reputation: 240928

You could use even/odd to alternate between tr elements and select the first child td element:

EXAMPLE HERE

table tr:nth-child(even) td:first-child {
    background:#0068b3
}
table tr:nth-child(odd) td:first-child {
    background:#aebde1
}

Upvotes: 8

helion3
helion3

Reputation: 37381

tr td:first-child should work.

Note: I first answered with nth-child for the tr because I could have sworn you asked for alternate row coloring...

Upvotes: 0

Related Questions