Выберите нечетного четного ребенка, за исключением скрытого ребенка

Между строками 2 и 3 скрыто <div>. Я не хочу, чтобы это было взято из правила odd/even css. Какой был бы лучший подход, чтобы заставить это работать? http://jsfiddle.net/k0wzoweh/

<style>
.box:not(.hidden):nth-child(even) {background: green}
.box:not(.hidden):nth-child(odd) {background: orange}
.hidden {display:none;}
</style>
<div class="wrap">
    <div class="box">xx</div>
    <div class="box">xx</div>
    <div class="box hidden">xx</div>
    <div class="box">xx</div>
    <div class="box">xx</div>
    <div class="box">xx</div>
    <div class="box">xx</div>
</div>

Примечание. Может быть несколько элементов hidden.

Ответы

Ответ 1

Псевдоселекторы не складываются, поэтому ваш :not не влияет на :nth-child (и это не повлияет на :nth-of-type и т.д.

Если вы можете прибегнуть к jQuery, вы можете использовать псевдоселектор :visible, хотя это и не является частью спецификации CSS.

Если вы создаете HTML-код и можете его изменить, вы можете применять нечетные/четные логики во время выполнения, например, в PHP:

foreach ($divs AS $i => $div) {
    echo '<div class="box ' . ($i % 2 ? 'even' : 'odd') . '">x</div>';
}

Даже пытаюсь сделать что-то сложное, как

.box[class='box']:nth-of-type(even)

не работает, потому что psuedo-selector даже не стекается на селектор атрибутов.

Я не уверен, что это можно сделать с помощью CSS - я не могу сейчас придумать.

Ответ 2

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

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

.hidden {display:none;}

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

<div class="wrap">
  <div class="box">xx</div>
  <div class="box">xx</div>
  <div class="box hidden">xx</div>
  <div class="box">xx</div>
  <div class="box">xx</div>
  <div class="box">xx</div>
  <div class="box">xx</div>
</div>

Ответ 3

Поскольку мои строки скрыты с помощью js, я обнаружил, что самый простой подход для меня состоял в том, чтобы просто добавить дополнительную скрытую строку после каждой строки, которую я скрываю, и удалить скрытые строки, когда я снова покажу реальные строки.

Ответ 4

Спасибо Joe (+1) за указание правил css псевдоселектора и php-кода, который я мог бы очень использовать в jQuery 1:1, выглядя так:

var classToAdd = visibleBoxes%2 ? 'even' : 'odd' ;
$(this).addClass(classToAdd)

Ответ 5

Скройте строки, которые вы хотите скрыть для вызова .hide() для каждой строки таблицы, затем вызовите

$( "tr: visible: even" ). css ( "background-color", "");//очистить атрибут для всех строк

$( "tr: visible: even" ). css ( "background-color", "#ddddff" );//установить атрибут для четных строк

(добавьте свое имя таблицы в селектор, чтобы быть более конкретным) (используя: даже заставляет пропустить строку заголовка)

Ответ 6

Здесь используется только CSS-решение:

.box {
  background: orange;
}

.box:nth-child(even) {
  background: green;
}

.box.hidden {
  display: none;
}

.box.hidden ~ .box:nth-child(odd) {
  background: green;
}

.box.hidden ~ .box:nth-child(even) {
  background: orange;
}

<div class="wrap">
  <div class="box">xx</div>
  <div class="box">xx</div>
  <div class="box hidden">xx</div>
  <div class="box">xx</div>
  <div class="box">xx</div>
  <div class="box">xx</div>
  <div class="box">xx</div>
</div>