селектора CSS: применить стиль на все видимые элементах только

У меня есть панель-группа с 6 элементов: толькоселектора CSS: применить стиль на все видимые элементах только

<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>

Я хочу, чтобы эти панели в их заместителях цвета (зебры полоса) с помощью CSS,

Поэтому я применил эту формулу:

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

Моей проблема заключается в том, что я не хочу, чтобы эта формула будет применяться к DIV с «скрытым» классом (третьи дела) ... Я хочу, чтобы «перепрыгнуть» это div ...

Я ищу что-то вроде:

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

, но это не работает !! Любая идея?

источник

2017-02-05 taboubim

Для того чтобы 'nth-child' работал в этом случае, вам нужно удалить скрытый div из DOM. Рассмотрим jQuery 'remove()' или 'detach()'. http://stackoverflow.com/q/32385795/3597276 –

Проще говоря, 4-й ребенок всегда является четвертым ребенком, независимо от того, жив ли третий ребенок или нет. Здесь вы выбираете четных детей с родителями, если у них также есть класс .panel, а не класс '.hidden'. Четвертый – Harry

Да, используя JS, разрешите проблему, спасибо Michael_B – taboubim

: nth-child() псевдокласс просматривает дочернее дерево родителя, чтобы соответствовать действительному дочернему элементу (нечетному, четному). поэтому, когда вы объединяете его с: not (.hidden), он не будет фильтровать элементы должным образом.

вы можете сделать одну вещь, как это было предложено hashem qolami in this answer что:

мы могли подделать эффект на CSS градиент следующим образом:

.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>

Или вы можете использовать JS для удалите строку.

источник

2017-02-05 16:41:37

Да, но его решение CSS не очень динамично ... это всего лишь патч! .. Решение JS - хорошее решение! – taboubim

-1

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

Вы не можете быть в состоянии заметить, что он делает, если он находится на белом фоне. Кроме того, div, который скрыт, является нечетным числом детей.

источник

2017-02-05 16:38:16 Someone

селектора CSS: применить стиль на все видимые элементах только

ответ

Смежные вопросы