¿Los paréntesis están permitidos en los selectores de CSS?

En el siguiente ejemplo, quiero crear una regla de CSS que se aplique solo al encabezado con el texto “Blockhead”.

Blockhead

Clay rules

¿Puedo usar paréntesis, como (.gumby > .pokey) + h3 ? Si no, ¿cuál es mi alternativa?

No, los paréntesis no son operadores válidos en los selectores de CSS. Están reservados para notaciones funcionales, como :lang() :not() y :nth-child() .

No los necesitas de todos modos; .gumby > .pokey + h3 por sí solo funcionará bien.

Esto se debe a que una secuencia de selectores y combinadores siempre se lee linealmente . Los combadores no tienen ningún tipo de precedencia. El selector puede ser interpretado como

Seleccione un elemento h3
que sigue inmediatamente un elemento con clase pokey
que es hijo de un elemento con clase gumby .

Y debido a cómo funcionan los árboles de nodos, el uso de los combinadores de hermanos e hijos aquí implica que tanto .pokey como h3 son hijos de .gumby , que en su caso lo son, debido a su statement de que ambos son hermanos.

h3 no está dentro de .pokey así que debes omitir .pokey de la regla

Todo lo que podrías hacer es

 .gumby h3 {} 

o haz esto

  

Blockhead

Clay rules

.gumby.pokey h3 {}

si una etiqueta tiene más de una clase, puedes astackrla en css si no usas un carácter de espacio