Correct terms and words for sections and parts of

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    */

回答1:

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

Currently, these are simply called selectors, which really doesn't sit well with me. In future, they'll be better-defined as complex selectors.

The entire comma-separated list is known as a selector list or group.

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

Currently, these are called sequences of simple selectors. In future, they'll be 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.

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

Selectors level 3 sums it up as follows:

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)
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.
A simple selector sequence is a chain of simple selectors not separated by a combinator:
```
a:not([rel="external"]):hover
```
A selector (I hate this definition) is a complete string made up of selector sequences linked by combinators:
```
nav[role="main"] > ul:first-child > li
```

Selectors level 4 redefines a number of terms and as a result makes things less ambiguous and less clumsy:

A sequence of simple selectors is now known as a compound selector.
The name complex selector is now given to the CSS3 definition of a "selector" (that is, a string of compound selectors and combinators).
A group of one or more compound/complex selectors is now formally known as a selector list. The term itself currently makes no distinction between the two, and I don't see this changing anytime soon.

However if you read the grammar for certain functional pseudo-classes, it will describe what kind of selector lists they're looking for. For instance, the enhanced :not() pseudo-class accepts a list of compound selectors, whereas the original version only allowed a single simple selector as its argument.
The term selector has been generalized, so it may now refer to any of the following for the purposes of simplicity and brevity:
- Simple selector
- Compound selector
- Complex selector
- Selector list (e.g. the "selector" component of a style rule)

Some personal notes:

The term "key selector" is 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" is coined by Web 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.
Typical style rules (or rulesets) in CSS consist 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, notably :nth-match() and :nth-last-match(). Since they're still being specced, it hasn't yet been decided how any of this will be implemented.

回答2:

The specification offers terminology for this:

A selector is a chain of one or more sequences of simple selectors separated by combinators. One pseudo-element may be appended to the last sequence of simple selectors in a selector.

A sequence of simple selectors is a chain of simple selectors that are not separated by a combinator. It always begins with a type selector or a universal selector. No other type selector or universal selector is allowed in the sequence.

A simple selector is either a type selector, universal selector, attribute selector, class selector, ID selector, or pseudo-class.

Combinators are: whitespace, "greater-than sign" (U+003E, >), "plus sign" (U+002B, +) and "tilde" (U+007E, ~). White space may appear between a combinator and the simple selectors around it. Only the characters "space" (U+0020), "tab" (U+0009), "line feed" (U+000A), "carriage return" (U+000D), and "form feed" (U+000C) can occur in whitespace. Other space-like characters, such as "em-space" (U+2003) and "ideographic space" (U+3000), are never part of whitespace.

There are some small terminology differences between CSS 2 and 3

the list of basic definitions (selector, group of selectors, simple selector, etc.) has been changed; in particular, what was referred to in CSS2 as a simple selector is now called a sequence of simple selectors, and the term "simple selector" is now used for the components of this sequence

回答3:

The parts separated by commas are called selectors.

Within a selector we have simple_selectors and combinators.

See the grammar.