Proper terms and vocabulary for segments and components of selectors

Question

Proper terms and vocabulary for segments and components of selectors

Can you identify the proper terminology for the segments of CSS selectors that are divided by commas?

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

And what term is used for the elements within those segments that are separated by combinators (such as spaces, +, >, etc)?

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

css css-selectors terminology

Answer 1

Answer №1

What is the proper term for the segments of CSS selectors that are separated by commas?

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

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

These elements are known as compound selectors.

So, a selector-list consists of one or more complex selectors separated by commas, and each complex selector is composed of two main parts: compound selectors, and combinators. It may also include pseudo-elements if needed.

Compound selectors were previously known as "sequence of simple selectors". Similarly, complex selectors were just called "selectors". It's advised to use the new terms as they are clearer, less cumbersome, and more precise compared to the older terminology.

Since we're on the topic, here are the other definitions...

A simple selector serves as a fundamental component of selectors. It can be any of the following:
- Universal selector (*), with optional namespace
- Type selector (a, div, span, ul, li, etc), with optional namespace
- Attribute selector ([att], [att=val], etc), with optional namespace
- Class selector (.class)
- ID selector (#id)
- Pseudo-class (:pseudo-class)
As mentioned earlier, a compound selector (formerly known as "sequence of simple selectors") is a series of simple selectors not divided by a combinator:
```
a:not([rel="external"]):hover
```
A combinator acts as another essential component of selectors. It's a symbol or token that separates two compound selectors, establishing a relationship between the elements represented by them. Currently, there are four combinators in use:
- 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 might be introduced in future specifications.
A complex selector (previously termed as "selector") is a complete string comprising compound selectors linked by combinators:
```
nav[role="main"] > ul:first-child > li
```
The element at the end, or the only one, of a complex selector is known as the subject, representing the element to be styled or matched. In the previous example, the subject is li.
The term selector has been broadened to encompass several components like simple selector, compound selector, complex selector, and selector-list for simplicity and conciseness. Context should indicate which specific type of selector is being referred to.

Additional notes:

The term "key selector" was coined by browser vendors for internal selector implementations but isn't an official term. It's commonly used to mean "subject of the selector," as implementations typically identify matches based on the subject of the selector.
The term "pseudo-selector" was created by authors to blend pseudo-classes and pseudo-elements but lacks official recognition. It's advisable not to use this term as it confuses distinct concepts under a single label, leading to unnecessary confusion.
Pseudo-elements (::pseudo-element) aren't simple selectors, so they can't match actual elements directly. However, they are considered selectors for parsing purposes and can appear at the end of complex selectors in a list.
In CSS, a standard style rule comprises a selector and a declaration block.
Namespace prefixes aren't standalone selectors but may be added to certain selectors like type selectors, universal selectors, and attribute selectors to match namespaced components within a document.
Specificity currently pertains to individual complex selectors. When matching rules, all complex selectors that match an element are considered for specificity calculations. If multiple complex selectors match an element, the most specific one dictates the calculation outcome.

Some level 4 selectors may complicate specificity issues, including :is() and enhanced :not(), along with of S notation in advanced :nth-child() pseudo.

Answer 2

What is the proper term for the segments of CSS selectors that are separated by commas?

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

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

These elements are known as compound selectors.

So, a selector-list consists of one or more complex selectors separated by commas, and each complex selector is composed of two main parts: compound selectors, and combinators. It may also include pseudo-elements if needed.

Compound selectors were previously known as "sequence of simple selectors". Similarly, complex selectors were just called "selectors". It's advised to use the new terms as they are clearer, less cumbersome, and more precise compared to the older terminology.

Since we're on the topic, here are the other definitions...

A simple selector serves as a fundamental component of selectors. It can be any of the following:
- Universal selector (*), with optional namespace
- Type selector (a, div, span, ul, li, etc), with optional namespace
- Attribute selector ([att], [att=val], etc), with optional namespace
- Class selector (.class)
- ID selector (#id)
- Pseudo-class (:pseudo-class)
As mentioned earlier, a compound selector (formerly known as "sequence of simple selectors") is a series of simple selectors not divided by a combinator:
```
a:not([rel="external"]):hover
```
A combinator acts as another essential component of selectors. It's a symbol or token that separates two compound selectors, establishing a relationship between the elements represented by them. Currently, there are four combinators in use:
- 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 might be introduced in future specifications.
A complex selector (previously termed as "selector") is a complete string comprising compound selectors linked by combinators:
```
nav[role="main"] > ul:first-child > li
```
The element at the end, or the only one, of a complex selector is known as the subject, representing the element to be styled or matched. In the previous example, the subject is li.
The term selector has been broadened to encompass several components like simple selector, compound selector, complex selector, and selector-list for simplicity and conciseness. Context should indicate which specific type of selector is being referred to.

Additional notes:

The term "key selector" was coined by browser vendors for internal selector implementations but isn't an official term. It's commonly used to mean "subject of the selector," as implementations typically identify matches based on the subject of the selector.
The term "pseudo-selector" was created by authors to blend pseudo-classes and pseudo-elements but lacks official recognition. It's advisable not to use this term as it confuses distinct concepts under a single label, leading to unnecessary confusion.
Pseudo-elements (::pseudo-element) aren't simple selectors, so they can't match actual elements directly. However, they are considered selectors for parsing purposes and can appear at the end of complex selectors in a list.
In CSS, a standard style rule comprises a selector and a declaration block.
Namespace prefixes aren't standalone selectors but may be added to certain selectors like type selectors, universal selectors, and attribute selectors to match namespaced components within a document.
Specificity currently pertains to individual complex selectors. When matching rules, all complex selectors that match an element are considered for specificity calculations. If multiple complex selectors match an element, the most specific one dictates the calculation outcome.

Some level 4 selectors may complicate specificity issues, including :is() and enhanced :not(), along with of S notation in advanced :nth-child() pseudo.

Answer 3

Answer №2

The guidelines provide specific language for this:

A selector is a series of simple selectors connected by combinators. A pseudo-element can be added to the end of the selector.

A series of simple selectors is a chain of simple selectors without any combinators between them. It always starts with a type selector or a universal selector, with no other type or universal selectors allowed in the series.

A simple selector can be a type selector, universal selector, attribute selector, class selector, ID selector, or pseudo-class.

Combinators include whitespace, ">" (greater-than sign), "+" (plus sign), and "~" (tilde). Whitespace can separate combinators from the surrounding simple selectors. Only certain characters like "space," "tab," "line feed," "carriage return," and "form feed" are considered whitespace

There are slight differences in terminology between CSS 2 and 3

The basic definitions have been updated; what was known as a simple selector in CSS2 is now referred to as a sequence of simple selectors, while the term "simple selector" now refers to the components within that sequence

Answer 4

The guidelines provide specific language for this:

A selector is a series of simple selectors connected by combinators. A pseudo-element can be added to the end of the selector.

A series of simple selectors is a chain of simple selectors without any combinators between them. It always starts with a type selector or a universal selector, with no other type or universal selectors allowed in the series.

A simple selector can be a type selector, universal selector, attribute selector, class selector, ID selector, or pseudo-class.

Combinators include whitespace, ">" (greater-than sign), "+" (plus sign), and "~" (tilde). Whitespace can separate combinators from the surrounding simple selectors. Only certain characters like "space," "tab," "line feed," "carriage return," and "form feed" are considered whitespace

There are slight differences in terminology between CSS 2 and 3

The basic definitions have been updated; what was known as a simple selector in CSS2 is now referred to as a sequence of simple selectors, while the term "simple selector" now refers to the components within that sequence

Answer 5

Answer №3

The components delineated by commas are known as selectors.

Inside a selector, there exist simple_selectors and combinators.

Refer to this resource for more information.

Answer 6

The components delineated by commas are known as selectors.

Inside a selector, there exist simple_selectors and combinators.

Refer to this resource for more information.

Proper terms and vocabulary for segments and components of selectors

Answer №1

Answer №2

Answer №3

Similar questions

Auto-scrolling text box cursor movement

The elements within <header> and <footer> tags will always remain at the top of the page unless specifically

Choose various div elements and modify their background colors

Having issues with my Bootstrap navigation dropdown - any suggestions on what I might be overlooking?

Having trouble accessing listview capabilities in jquerymobile?

Achieving a 100% width input with Flexbox: Tips and tricks for success

Add a transition or animation effect to the <details> element as it closes

Crafting a gap between a component and its border

Limit the container's height to be no more than the height of the

The CSS dropdown menu appears in a horizontal layout rather than vertical

Can you explain the distinction between using single and double quotes in my JavaScript and CSS code?

Align columns to the right and left using Bootstrap

The behavior of CSS position: sticky varies depending on whether the user is scrolling up or scrolling down

How can I establish the conversion from pixels to em units?

Accessing .js and .css libraries from shared views in ASP.NET Core can be restricted

Centering the menu on the screen

Error encountered while attempting to input text into an element using Selenium and Python: ElementNotInteractableException - Keyboard cannot reach element

NodeJS for CSS Parsing and Selecting

Creating a fixed navigation bar that stays at the top of the page when scrolling

Choose either nth-child or nth-of-type within a nested element