Разрешены ли скобки в CSS-селекторах?

В приведенном ниже примере я хочу создать правило CSS, которое применяется только к заголовку с текстом "Blockhead".

 <div class="gumby">
     <span class="pokey"></span>
     <h3>Blockhead</h3>
     <h3>Clay rules</h3>
 </div>

Можно ли использовать круглые скобки, например (.gumby > .pokey) + h3? Если нет, то какова моя альтернатива?

Ответы

Ответ 1

Нет, круглые скобки не являются допустимыми операторами в селекторах CSS. Они зарезервированы для функциональных обозначений, таких как :lang(), :not() и :nth-child().

Они вам все равно не нужны; .gumby > .pokey + h3 сам по себе будет работать нормально.

Это потому, что последовательность селекторов и комбинаторов всегда читается линейно. Комбинаторы не имеют какого-либо приоритета. Селектор можно интерпретировать как

Выберите элемент h3
что сразу следует элемент с классом pokey
это дочерний элемент с классом gumby.

И из-за того, как работают деревья node, использование комбинированных и дочерних комбинаторов означает, что оба .pokey и h3 являются дочерними элементами .gumby, которые в вашем случае они есть, из-за его утверждения что оба они являются братьями и сестрами.

Ответ 2

h3 не находится внутри .pokey, поэтому вы должны ommit.pokey из правила

Все, что вы могли бы сделать, это

.gumby h3 {}

или сделайте это

 <div class="gumby pokey">
     <h3>Blockhead</h3>
     <h3>Clay rules</h3>
 </div>

.gumby.pokey h3 {}

Если тег имеет более одного класса, вы можете скопировать их в css, если вы не используете пробельный символ