LESS (CSS) selector for even tr with not class .hide

Question

I am working on collapse-able tables. I am trying to change background for even tr but I don't calculate hidden tr which have .hide class.

Issue: suppose I have two hidden tr by applying

:nth-of-type(even) // even = 2
{
  background: #F5F5F5;
}

changes background of every even tr. This cause two visible tr with same color. While I need stripped functionality. I don't want this selector apply on those hidden tr with class .hide. So that there would be no two adjustment tr with same background. As shown in screen shot.

Fiddle with Issue

enter image description here

I have tried following but not successful.

tr:not(.hide)
{
    &:nth-of-type(even)
    {
      background: #F5F5F5;
    }
}

possible duplicate of [Zebra striping a table with hidden rows using CSS3?](http://stackoverflow.com/questions/3773890/zebra-striping-a-table-with-hidden-rows-using-css3) — kornieff, Sep 15 '14 at 07:45
are you willing to change markup? I know a pure css solution, but you cannot use tr's for rows. — kornieff, Sep 15 '14 at 07:56
@AamirShahzad can you make a [fiddle](http://codepen.io/pen/)? — Vucko, Sep 15 '14 at 08:03
@Vucko http://jsfiddle.net/aash1010/ps7Lfvgu/ here is the fiddle i have updated the question as well — Aamir Shahzad, Sep 15 '14 at 08:58

score 2 · Accepted Answer · answered Sep 15 '14 at 08:57

You can't do this in pure css.

Solved a similar issue iterating table and dynamically adding odd/even css rules to each row.

Suppose this tab

<table id="theTab">
  <tr><td>row 1</td></tr>
  <tr class="hidden"><td>row 2</td></tr>
  <tr><td>row 3</td></tr>
  <tr><td>row 4</td></tr>
</table>

With the following JS

var classToggle = false;

$("#theTab tr:not(.hidden)").each(function(){
    $(this).addClass(classToggle ? "odd" : "even");
    classToggle = !classToggle;
});

It's a JQuery based solution, but works fine and doesn't require any table modification (you can use anything instead of .hidden class selector..)

DEMO here

score 0 · Answer 2 · answered Sep 15 '14 at 08:00

0

This is what I did in similar situation. nth-of-type works only with different tag names.

HTML

<div class="table">
   <div class="row">...</row>
   <aside><div class="row">...</row></aside>
   <div class="row">...</row>
   <div class="row">...</row>
</div>

CSS

.table {display:table}
aside {display:none;}
.table .row:nth-of-type(odd) { background: pink; }

answered Sep 15 '14 at 08:00

kornieff

2,389
19
29

1

then use JS to assign odd/even row classes – kornieff Sep 15 '14 at 08:07

LESS (CSS) selector for even tr with not class .hide

2 Answers2