Search code examples
htmlcssalternating

Table Alternating Color nth-child:not(.class)

I have multiple <tr> in a table and some of those are followed by a <tr class="colapsed"> which has some details. Not all the <tr> tags have details. I need to create alternating colors but ignoring the collapsed class. I've tried to use table>tbody>tr:nth-child(odd) { background:red } but it doesn't seem to work as I want.

Any ideas?

table>tbody>tr:not(.collapsed):nth-child(odd) {
  background: red
}
.collapsed {
  display: none
}
<table class="rwd-table table-auto doubletr">
  <tbody>
    <tr class="">
      <td>
        <div>2016-10-02</div>
      </td>
      <td>
        <div>2016-02-03</div>
      </td>
      <td>
        <div>Pagamento por Multibanco</div>
      </td>
      <td>
        <div></div>
      </td>
      <td>
        <div>90</div>
      </td>
      <td>
        <div>2895.01</div>
      </td>
      <td>
        <div class="expand-wrap">
          <a class="expand" href="#"><i class="icon icon-plus"></i></a>
        </div>
      </td>
    </tr>
    <tr class="collapsed">
      <td colspan="7">
        details here
      </td>
    </tr>

    <tr>
      <td>
        <div>2016-10-02</div>
      </td>
      <td>
        <div>2016-02-03</div>
      </td>
      <td>
        <div>Pagamento por Multibanco</div>
      </td>
      <td>
        <div></div>
      </td>
      <td>
        <div>90</div>
      </td>
      <td>
        <div>2895.01</div>
      </td>
      <td>
        <div class="expand-wrap">
          <a class="expand" href="#"><i class="icon icon-plus"></i></a>
        </div>
      </td>
    </tr>
    <tr class="collapsed">
      <td colspan="7">
        details here
      </td>
    </tr>

    <tr>
      <td>
        <div>2016-10-02</div>
      </td>
      <td>
        <div>2016-02-03</div>
      </td>
      <td>
        <div>Pagamento por Multibanco</div>
      </td>
      <td>
        <div></div>
      </td>
      <td>
        <div>90</div>
      </td>
      <td>
        <div>2895.01</div>
      </td>
      <td>
        <div class="expand-wrap">
          <a class="expand" href="#"><i class="icon icon-plus"></i></a>
        </div>
      </td>
    </tr>
    <tr>
      <td>
        <div>2016-10-02</div>
      </td>
      <td>
        <div>2016-02-03</div>
      </td>
      <td>
        <div>Pagamento por Multibanco</div>
      </td>
      <td>
        <div></div>
      </td>
      <td>
        <div>90</div>
      </td>
      <td>
        <div>2895.01</div>
      </td>
      <td>
        <div class="expand-wrap">
          <a class="expand" href="#"><i class="icon icon-plus"></i></a>
        </div>
      </td>
    </tr>
  </tbody>
</table>

The answer here doesn't describe my situation. I'm trying to prevent the odd event from considering all the tags with collapsed class.

Alternative Resolution
For those in the same situation. Since :nth- selectors don't care about visibility I solved my issue using a simple jquery function.

var n = 1;
$("table>tbody>tr:not('[class*=collapsed]')").each(function() {
  if (n % 2) { //even
    $(this).css("background", "red");
  } else { //odd
    $(this).css("background", "yellow");
  }
  n += 1;
})

Solution

  • I don't believe this is possible given that :nth- selectors don't care about visibility. You can :not out of the ones you don't want, but the :nth isn't going to skip it in its algorithm. Maybe this will help?

    http://nthmaster.com/