CODEWITHSUNDEEP
htmlcss
serge
serge

Reputation: 15239

Colorize the thead and the odd row in a table in different colors

I need to colorize the background of the thead tr in black and the odd table rows in lightgreen. I don't use CSS classes, only HTML elements.

So, I use tr:nth-child(odd) with table thead tr that didn't work for the latter, as the : has upper priority than the element names.

So it seems for me impossible to do it without "hacking" the thead:first-child (that is obvious, there are no multiple theads in a table).

   
tr:nth-child(odd) { background-color: lightgreen; }

table thead:first-child tr { background-color: black; color: lightgreen; }
<table>
  <thead>
    <tr><td>Name</td><td>City</td></tr> <!-- Green on Black -->
  </thead>

  <tbody>
    <tr><td>row 1</td><td>London</td></tr> <!-- Black on Green -->
    <tr><td>row 2</td><td>Paris</td></tr>
    <tr><td>row 3</td><td>Munich</td></tr>
    <tr><td>row 4</td><td>Kiev</td></tr>
    <tr><td>row 5</td><td>Amsterdam</td></tr>
  </tbody>
</table>

Is there more elegant way to do it?

Upvotes: 0

Views: 1289

Answers (2)

Aamir Hasan
Aamir Hasan

Reputation: 21

You could try this, but it doesn't really make a difference I guess. 

   
tr:nth-child(odd) { background-color: lightgreen; }

th { background-color: black; color: lightgreen; }
<table>
  <thead>
    <tr><th>Name</th><th>City</th></tr> <!-- Green on Black -->
  </thead>

  <tbody>
    <tr><td>row 1</td><td>London</td></tr> <!-- Black on Green -->
    <tr><td>row 2</td><td>Paris</td></tr>
    <tr><td>row 3</td><td>Munich</td></tr>
    <tr><td>row 4</td><td>Kiev</td></tr>
    <tr><td>row 5</td><td>Amsterdam</td></tr>
  </tbody>
</table>

Upvotes: 1

kulaeff
kulaeff

Reputation: 453

I guess there is no more elegant way to do it than this:

table thead tr { background-color: black; color: lightgreen; }
table tbody tr:nth-child(odd) { background-color: lightgreen; }
<table>
  <thead>
    <tr><td>Name</td><td>City</td></tr> <!-- Green on Black -->
  </thead>

  <tbody>
    <tr><td>row 1</td><td>London</td></tr> <!-- Black on Green -->
    <tr><td>row 2</td><td>Paris</td></tr>
    <tr><td>row 3</td><td>Munich</td></tr>
    <tr><td>row 4</td><td>Kiev</td></tr>
    <tr><td>row 5</td><td>Amsterdam</td></tr>
  </tbody>
</table>

Upvotes: 2

Related Questions