css selector : apply a style on all visible elements only

Question

I have a panel-group with 6 elements :

<div class="panel-group" id="accordion1" role="tablist" aria-multiselectable="true">
    <div class="panel panel-default">
       1
    </div>

    <div class="panel panel-default">
        2
    </div>
    <div class="panel panel-default js_subscription_open hidden">
        3
    </div>

    <div class="panel panel-default">
       4
    </div>

    <div class="panel panel-default">
        5
    </div>

    <div class="panel panel-default">
        6
    </div>
</div>

I want to make these panels to alternates color (zebra stripe) using CSS only,

So I applied this formula :

.panel:nth-child(even) {
  background-color: white
}

My problem is that I dont want that this formula be applied to the div with the "hidden" class (third div) ... I want to "jump" this div ...

I'm seeking for something like :

.panel:not(.hidden):nth-child(even) {
  background-color: white
}

but this is not working !! Any idea ?

For `nth-child` to work in this case, you need to remove the hidden div from the DOM. Consider jQuery `remove()` or `detach()`. http://stackoverflow.com/q/32385795/3597276 — Michael Benjamin, Feb 05 '17 at 16:28
To put it in simple terms, the 4th child is always the 4th child irrespective of whether the 3rd child is alive or not. Here you selector selects the even numbered children of their parent as long as they also have `.panel` class and not the `.hidden` class. The fourth — Harry, Feb 05 '17 at 16:28

score 1 · Accepted Answer · edited May 23 '17 at 11:54

:nth-child() pseudo-class looks through the children tree of the parent to match the valid child (odd, even). therefore when you combine it with :not(.hidden) it won't filter the elements properly.

you can do one thing as suggested by hashem qolami in this answer which is:

we could fake the effect by CSS gradient as follows:

    .hidden {display:none;}
    
    .panel-group {
      line-height: 1.2em;
      
      background-color: orange; 
      background-image: linear-gradient(transparent 50%, green 50%);
      background-size: 100% 2.4em;
    }

<div class="panel-group">
    <div class="panel panel-default">
       1
    </div>

    <div class="panel panel-default">
        2
    </div>
    <div class="panel panel-default js_subscription_open hidden">
        3
    </div>

    <div class="panel panel-default">
       4
    </div>

    <div class="panel panel-default">
        5
    </div>

    <div class="panel panel-default">
        6
    </div>
</div>

Or you can use JS to delete the row.

Yes, but his CSS solution is not really dynamic ... it is just a patch !! .. The JS solution is a good solution! — Mohamed Taboubi, Feb 06 '17 at 01:23

score -1 · Answer 2 · answered Feb 05 '17 at 16:38

-1

.panel:not(.hidden):nth-child(even) { background: white; }

You may not be able to notice what it does if it is on a white background. Also the div that is hidden is an odd numbered child.

answered Feb 05 '17 at 16:38

Someone

800
1
7
25

css selector : apply a style on all visible elements only

2 Answers2