Можно ли установить правила CSS, основанные на значении элементов, не являющихся братьями и сестрами?

Question

Скажем, у вас есть этот код:

<div class="hello">
    <div class="cat dog"/>
</div>
<div class="notASibling" />

Можно ли установить свойство notASibling, основываясь на значении класса элемента, который не является родным братом?Например, в приведенном выше коде я могу захотеть установить свойство отображения notASibling скрытым, если класс hello> cat равен not a dog.

Если notASibling был «брат»собака ", я мог бы просто сказать:

.cat:not(.dog) ~ .notASibling{ display:none; }

Answer 1

Это невозможно в CSS.Ваш единственный реальный вариант - использовать Javascript.Библиотека jQuery основана на идее использования расширенных селекторов CSS для выбора элементов для управления ими, и вы можете сделать это здесь:

prevWasADog = $(".notASibling").prev().children('.cat').eq(0).is('.dog');

Answer 2

Ответ - нет. Спонтанно, вы можете подумать о комбинировании дочернего комбинатора и комбинатора родного брата, например:

.notASibling ~ .hello > .cat:not(.dog) { display: none }

Но это невозможно, поскольку в определении селекторов CSS 3 (http://www.w3.org/TR/css3-selectors/) селекторы могут использовать в качестве операндов только комбинаторы с «простыми селекторными последовательностями», а не другие селекторы. Поэтому, если вы следуете правилам грамматики W3C, вы можете использовать только один комбинатор в селекторе.

Answer 3

Вы не можете достичь не-брата в чистом CSS.Вы можете сделать это в JavaScript.Если вы хотите чисто CSS-решение, подумайте о рефакторинге вашего DOM.Может быть, что-то вроде этого:

<div class='dog'>
    <div class='hello'>
        <div />
    </div>
    <div class='notASibling' />
</div>


.cat div.notASibling {
    /* special styles for cats */
}
.dog div.notASibling {
    /* special styles for dogs */
}