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

Question

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

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

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

Answer 1

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

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

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

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

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

Answer 2

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

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

.gumby h3 {}

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

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

.gumby.pokey h3 {}

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