css - Correct terms and words for sections and parts of selectors

Question

What is the correct term for the sections of CSS selectors that are separated by commas?

    body.foo .login , body.bar .login { ... }
/*                  |
           Part 1   |  Part 2         */

Within those sections, what is the term for the parts separated by combinators (spaces, +, >, etc)?

    body.foo .login , ... { ... }
/*          |
   Part 1   |   Part 2    */

Answer 1

What is the correct term for the sections of CSS selectors that are separated by commas?

These are called complex selectors. The entire comma-separated list is known as a selector-list.

Within those sections, what is the term for the parts separated by combinators (spaces, +, >, etc)?

These are known as compound selectors.

So, a selector-list is made up of one or more complex selectors separated by commas, and each complex selector is made up of two main parts: compound selectors, and combinators. It can also optionally contain pseudo-elements.

Compound selectors used to have the rather convoluted name "sequence of simple selectors". Worse still, complex selectors were just called "selectors". Needless to say, I recommend using the new terms as they are much more straightforward, much less cumbersome and completely unambiguous compared to their predecessors.

---

And since I'm here, here are the rest of the definitions...

• A simple selector is one fundamental component of selectors. It is any one of the following:

  • Universal selector (*), optionally with a namespace
  • Type selector (a, div, span, ul, li, etc), optionally with a namespace
  • Attribute selector ([att], [att=val], etc), optionally with a namespace
  • Class selector (.class)
  • ID selector (#id)
  • Pseudo-class (:pseudo-class)

• As answered above, a compound selector (formerly a "sequence of simple selectors") is a chain of simple selectors not separated by a combinator:

  a:not([rel="external"]):hover
  

• A combinator is another fundamental component of selectors. It is a symbol or token that separates two compound selectors, establishing in its place a relationship between the two elements represented by the two compound selectors. There are currently four combinators in use today:

  • Descendant combinator:

    article p
    

  • Child combinator:

    /* 
     * The extra spaces in between are whitespace,
     * and are therefore insignificant.
     */
    ul > li
    

  • Adjacent sibling combinator:

    header + section
    

  • General sibling combinator:

    h2 ~ p
    

  More combinators may be introduced in later specifications.

• And a complex selector (formerly just "selector") is a complete string made up of compound selectors linked by combinators:

  nav[role="main"] > ul:first-child > li
  

• The subject of a complex selector is its last, or only, compound selector, representing the element that will be matched or styled. In the above example, the subject of the selector is li.

• The term selector has been generalized, so it may now refer to any of the following for the purposes of simplicity and brevity, and which one it's referring to at any given moment should be gleaned from context:

  • Simple selector
  • Compound selector
  • Complex selector
  • Selector-list (e.g. the "selector" component of a style rule)

Some personal notes:

• The term "key selector" was coined by browser vendors for use with selector implementations, and is not an official term. It is often used to mean "subject of the selector" however, because implementations happen to use the subject of the selector as the key for the purposes of determining matches.

• The term "pseudo-selector" was coined by authors to mix pseudo-classes and pseudo-elements, and is not an official, or indeed meaningful, term. Although you can find it in some early-stage W3C CSS2/3 drafts, that was probably a mistake. Please don't use this term, as it needlessly creates confusion by attempting to group two completely different concepts into a single umbrella term.

• Pseudo-elements (::pseudo-element) are not simple selectors, and therefore cannot appear in places where only actual elements may be matched. However, they are still considered selectors for the purposes of CSS parsing, and as stated above currently can appear at the end of any complex selector in a list (i.e. at the end of the last, or only, compound selector of each complex selector).

• In CSS, a typical style rule (formerly "ruleset") consists of a selector and a declaration block.

• Namespace prefixes are not selectors in their own right, but they may be applied to type selectors, universal selectors and attribute selectors to match components in a document that are (or are not) namespaced.

• The specificity of a selector currently only refers to that of a single complex selector. When matching rules, any of the complex selectors in a list that match a given element will be considered for specificity calculations. If more than one complex selector matches an element, the most specific one will be used for calculations.

  Specificity will be a more complicated issue with some level 4 selectors, such as :is() and the enhanced :not(), and the of S notation in the enhanced :nth-child() pseudo.