Are Parentheses Allowed in CSS Selectors

Are parentheses allowed in CSS selectors?

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.

Are parentheses in jQuery or CSS selectors allowed?

No, the expression is not valid.

You could do $("#div1, #div2").find('> div') instead.

CSS selector with parentheses and some sort of index in style inspector

What a mess. Now I understand why you tagged your original question (and this one) css-selectors.

To start, browser developer tools naïvely assume that classes and IDs don't contain any special CSS selector characters and can therefore be represented in CSS selector notation without any escape sequences. So what you get is something that looks like a selector, but on closer inspection is actually malformed. You can see evidence of this in pretty much every browser's developer tools. The breadcrumb navigation, for example, in every one of them will list the li element as li followed by a period (for a class selector) followed by the class name without any escape sequences. Evidently the same appears to hold true for IDs.

It would seem that Google Chrome uses this same notation for "Inherited from" labels. Firefox is smart enough to only list the element's element type (which is far more predictable), i.e. "Inherited from li", and display the actual style rule and the actual selector from the source CSS, but its breadcrumb navigation suffers from the same problem making it kind of moot.

What you're looking at in the element inspector, however, is not a selector. It's an HTML class attribute. The syntactic rules are completely different. And that's why I said that this answer of mine that you previously linked to was completely irrelevant to your original question. But I can see why you're confused, seeing as HTML and CSS are closely related and CSS has dedicated class and ID selectors. (I suspect there wouldn't be any confusion if we were forced to use quoted attribute selectors for all attributes from the beginning — but attribute selectors weren't even around until CSS2.)

As to why the class name that's reflected in the Styles pane is different from the one that's reflected in the element inspector, the reason for that is not clear. Either you're inspecting different elements altogether, or something else is at play (and judging by the cryptic-looking class names, it may well be some funky client-side scripting framework voodoo magic).

Prioritize parts of CSS selectors

What you are looking for is called Specificity. The linked article explains it very well.

Basically, which selector has precedence is based on how specific that selector is. As a somewhat intuitive example, .red.fruit is more specific than just .fruit since it has two class names. Therefore, in your CSS code, even if the .fruit selector comes after .red.fruit, the more specific one takes precedence.

There is more to it than just having multiple class names, though. As you can imagine, different types of selectors have different levels of precedence. For example, ID selectors are considered extremely specific since only a single element can (well, should) have the given ID. In general, this order goes like this, from most specific to least:

Inline Styles > ID Selectors > Class, attribute, and pseudo-class Selectors > Elements and pseudo-elements

Definitely read the article for more info.

---

Now, all that said, I think it's worth mentioning that as a good rule of thumb, you should aim to make your selectors as least specific as possible. In other words, try not to use ID Selectors or inline styles where you can avoid it, and use the least number of classnames necessary to select the elements you want.

Following this principle allows your CSS to be more flexible in the long run and easier to read.

What does a CSS selector in square brackets select in HTML?

For the selector to work:

<div text-uppercase></div>

[text-uppercase] selector matches an attribute on a tag.

What is the reason to have (square) brackets in an element's class name?

This is nothing more other than visually separating classes with the intention of grouping them.

The example you gave both do the same exact thing.

The brackets are allowed in the class attribute and are technically valid so long as they have spaces between the bracket and the class itself.

Additional information about this technique can be found on csswizardy, and for posterity, here is an excerpt explaining how he uses it:

How it works

There is no hard and fast rule as to how and when to begin grouping
your classes, but the guidelines I’ve set for myself are:

There must be more than one ‘set’ of classes. One ‘set’ must contain
more than one class. This basically just ringfences any groups that
need it, for example:

<!-- Only one set. Nothing needs grouping. -->
<div class="foo  foo--bar">

<!-- Two sets, but only one class in each. Nothing needs grouping. -->
<div class="foo  bar">

<!-- Two sets, one of which contains more than one class. This set needs grouping. -->
<div class="[ foo  foo--bar ]  baz">

<!-- Two sets, both of which contain more than one class. These sets needs grouping. -->
<div class="[ foo  foo--bar ]  [ baz  baz--foo ]">

How you group them
can be entirely your choice, the concept here just deals with the fact
that we’re grouping things at all.

---

Related Topics