CODEWITHSUNDEEP
htmlcss
Poul K. Sørensen
Poul K. Sørensen

Reputation: 17530

Color rows after even / odd row selectors in css

given a table

<table>
<tr class="sechead">...
<tr>...
<tr>... 
<tr class="sechead">...
<tr>...
<tr>...
</table>

I have tried the following. I want it to alternate the colours for the rows coming after sechead.

table tr.sechead:nth-child(even) ~ tr{background-color:rgb(75,172,198);}
table tr.sechead:nth-child(odd) ~ tr{background-color:rgb(153,129,189);}

It color all the rows with the same color. Any possible solutions for this?

Upvotes: 0

Views: 747

Answers (2)

Arun Unnikrishnan
Arun Unnikrishnan

Reputation: 2349

If your sure you have only two <tr> tags after every class="sechead" . Then u can try this

<table>
<tr class="sechead"><td>Hello</td></tr>
<tr><td>content1</td></tr>
<tr><td>content2</td></tr>
<tr class="sechead"><td>welcome</td></tr>
<tr><td>content4</td></tr>
<tr><td>content5</td></tr>
</table>

CSS 

<style>
tr{width:50px;height:30px;}
table tr.sechead + tr{background-color:rgb(75,172,198);}
table tr.sechead + tr+tr{background-color:rgb(153,129,189);}
</style>

Upvotes: 0

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324650

The problem is that all of the rows after the .sechead come after the first .sechead

If adjusting the HTML is okay, you could try this:

<table>
  <tbody>
    <tr class="sechead">...</tr>
    <tr>...</tr>
    <tr>...</tr>
  </tbody>
  <tbody>
    <tr class="sechead">...</tr>
    <tr>...</tr>
    <tr>...</tr>
  </tbody>
  ...
</table>

Then your style can be:

tbody > tr {background-color:rgb(75,175,198);}
tbody:nth-child(even) > tr {background-color:rgb(153,129,189);}

Note that I removed the "odd" selector, so that browsers that don't support nth-child still have a fallback defined.

Upvotes: 1

Related Questions