Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Are parentheses allowed in CSS selectors?

In the below example, I want to create a CSS rule that applies only to the header with the text "Blockhead".

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

Can I use parentheses, such as (.gumby > .pokey) + h3? If not, what is my alternative?

like image 842
smartcaveman Avatar asked Mar 29 '11 21:03

smartcaveman


People also ask

Can you use brackets in CSS?

The syntax in CSS is different than what it is in HTML. HTML uses arrows, while CSS uses curly brackets and semi-colons are used at the end of each line.

What are the valid selectors in CSS?

The :valid selector selects form elements with a value that validates according to the element's settings. Note: The :valid selector only works for form elements with limitations, such as input elements with min and max attributes, email fields with a legal email, or number fields with a numeric value, etc.


1 Answers

No, parentheses are not valid operators in CSS selectors. They are reserved for functional notations, such as :lang(), :not(), and :nth-child().

You don't need them anyway; .gumby > .pokey + h3 by itself will work just fine.

This is because a sequence of selectors and combinators is always read linearly. Combinators don't have any sort of precedence. The selector can be interpreted as

Select an h3 element
that immediately follows an element with class pokey
that is a child of an element with class gumby.

And because of how node trees work, the use of sibling and child combinators here implies that both .pokey and the h3 are children of .gumby, which in your case they are, because of its statement that both of them are siblings.

like image 67
BoltClock Avatar answered Sep 20 '22 00:09

BoltClock