Как применить класс к ребенку, если все остальные дети скрыты?

Question

Я знаю, что это очень просто с jQuery, хотя я после разрешения только CSS (если это возможно).

У меня есть список divs, при этом последний элемент является сообщением об ошибке. У меня есть простая система фильтрации, и если ни один из divs не соответствует выбранному фильтру, я бы хотел отобразить ошибку div.

HTML Структура:

<div id="listHolder"> 
    <div class="listItem" data-filter-class="["filter1"]"></div> 
    <div class="listItem" data-filter-class="["filter2"]"></div> 
    <div class="listItem" data-filter-class="["filter1"]"></div> 
    <div class="listItem" data-filter-class="["filter4"]"></div> 
    <div class="errorItem">Nothing to display here</div> 
</div> 

То, что я пытаюсь достичь:

Если ДИВ не соответствует ни одному из фильтров, мой фильтр плагин дает им класс inactive. Следовательно, мне нужно проверить, есть ли у всех div с классом listItem класс inactive, чтобы дать классу errorItem стиль display:block.

FYI Я использую плагин Wookmark для своего списка и системы фильтрации. Я также использую МЕНЬШЕ.

Answer 1

Проблемы у вас есть в вашем требовании:

мне нужно проверить, если все дивы с классом ListItem также имеют класс неактивных, чтобы дать классу errorItem стиля display:block

Пока мы можем установить стиль для окончательного элемента <div> на основе его предыдущих братьев и сестер, мы не можем (не зная, сколько может быть) 'проверить, все divs' имеют класс inactive. Можно, однако, использовать родственный комбинатор (+) и громоздкий селектор:.

.errorItem { 
    display: none; 
} 
.listItem.inactive + .listItem.inactive + .listItem.inactive + .listItem.inactive + errorItem { 
    display: block; 
} 

Это, однако, смешно (особенно если есть динамическое число элементов, предшествующих .errorItem элемент

Если есть а-имя класса применяется для элемента, который делает соответствовать поставляемые фильтры, active к примеру, это гораздо проще, и достигается за счет:

.errorItem { 
    display: block; 
} 

.listItem.active ~ .errorItem { 
    display: none; 
} 

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

.errorItem { 
    display: block; 
} 

.listItem:not(.inactive) ~ .errorItem { 
    display: none; 
} 

В целом , Я бы настоятельно рекомендовал использовать JavaScript для поддержки этой функциональности, тем более, что использование Wookmark подразумевает использование JavaScript (если не обязательно jQuery) на том же сайте.

Родной JavaScript:

function hasPrecedingSibling (elem, state) { 
    if (!state) { 
     return false; 
    } 
    var found = false, 
     cur = elem; 
    while (cur.previousElementSibling && found === false) { 
     if (cur.classList.contains(state)) { 
      found = true; 
     } 
     else { 
      cur = cur.previousElementSibling; 
     } 
    } 
    return found; 
} 

[].forEach.call(document.querySelectorAll('.errorItem'), function (err) { 
    err.style.display = hasPrecedingSibling (err, 'active') ? 'none' : 'block'; 
}); 

Answer 2

Конечно, это возможно: http://jsfiddle.net/rudiedirkx/7b1kyfz3/3/

Вы хотите скрыть последний пункт, если предыдущий пункт не скрыт:

.listItem:not(.inactive) ~ .errorItem { 
    display: none; 
} 

Демо использует JS просто для переключения класса inactive, а не для логики отображения errorItem.

Я все еще согласен со всеми умными людьми здесь: JS, возможно, сделает это лучше. Вы все равно используете его.