Are parentheses allowed in CSS selectors?

Question

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?

Community · Accepted Answer · 2017-05-23 12:16:33Z

39

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.

edited May 23, 2017 at 12:16

CommunityBot

11 silver badge

answered Mar 29, 2011 at 21:08

BoltClock

728k165 gold badges1.4k silver badges1.4k bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

user686249 Over a year ago

While "You don't need them anyway" is true, parentheses would help to avoid repetition, if they were allowed, like: .gumby > (.hokey, .pokey) + h3

BoltClock Over a year ago

@user686249: That role will be filled by the :matches() pseudo so there's no need for a brand new syntactic construct.

user686249 Over a year ago

Awesome, didn't know that one.

BoltClock Over a year ago

@John: Not to this question. This question says nothing about grouping selectors, and the comment I was responding to was left by a completely different individual. You're probably thinking of something like stackoverflow.com/questions/34771974/…, to which :matches() is the actual answer. (You could argue that it can be used for something like :matches(.gumby > .pokey) + h3, but that's completely redundant anyway since it has the exact same meaning as .gumby > .pokey + h3.)

Denis Howe Over a year ago

:matches() was renamed to :is() in 2018 (Chrome & Firefox but not Edge). github.com/w3c/csswg-drafts/issues/3258, developer.mozilla.org/en-US/docs/Web/CSS/:is

|

cmarangu · Accepted Answer · 2022-09-05 07:11:08Z

As of 2022, we can now use the :is() selector for this purpose:

https://developer.mozilla.org/en-US/docs/Web/CSS/:is

:is(.gumby > .pokey) + h3 { color: blue; }

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

If I understand correctly, :is() can simulate both logical AND :is(A):is(B):is(C) and logical OR :is(A, B, C), allowing for powerful combinations. Don't forget to use it in concert with other structural pseudo-classes such as :not() and :nth-child(), CSS Combinators, and DOM Traversal methods such as document.querySelectorAll(). Also, the :where() pseudo-class is identical except that it has 0 specificity, while :is() takes the specificity of its most specific argument.

BoltClock · Accepted Answer · 2011-06-21 23:14:36Z

h3 is not inside .pokey so you must ommit .pokey from the rule

All u'd be able to do is

.gumby h3 {}

or do this

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

if a tag has more than one class you can pile them up in css if you don't use a space character

Just realised this may not have been what you was asking for. My apologies
Thank you, But you are correct - this does not address the problem.

Collectives™ on Stack Overflow

Are parentheses allowed in CSS selectors?

3 Answers 3

6 Comments

Comments

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

Comments

2 Comments

Linked

Related