CODEWITHSUNDEEP
cssnaming-conventionscss-selectorsnaming
Ry-
Ry-

Reputation: 224857

What is that thing between CSS "selectors" called?

What do you call these:

body > p + p

in a CSS selector? Are they:

I just have no idea what to call them. Is there an official name?

(And, also, are there official names for a b c in a b c, d e f and a in a b c?)

Upvotes: 11

Views: 854

Answers (3)

Duncan Babbage
Duncan Babbage

Reputation: 20177

As identified by Tom Haws, the operators between the simple selectors are called combinators. In CSS2 there were only three: +, >, and the space combinator.

In each case, the 'selector' is the full combination of the simple selectors and the combinators.

The range of valid combinators expanded, once CSS Selectors Level 3 was standardized, to include the ~ or "subsequent-sibling" combinator.

Upvotes: 7

Tom Haws
Tom Haws

Reputation: 1342

According to https://www.w3.org/TR/selectors-3/#combinators they are called "combinators".

  1. (space character) = descendant combinator
  2. > (angle bracket or greater-than sign) = child combinator
  3. + (plus mark) = adjacent sibling combinator
  4. ~ (tilde) = general sibling combinator

Upvotes: 25

Augustus Kling
Augustus Kling

Reputation: 3333

The characters or whitespace between tag names are called combinators, see for example General Sibling combinator. These are > and + in your example.

The tags in your example are called simple selector in CSS2 and CSS3. If you would have a b c that would be called sequence of simple selectors in CSS3 but simple selector in CSS2. The term simple selector does only refer to one element name in CSS3 such as a in a b c.

Or as the section Selector syntax states

A selector is a chain of one or more sequences of simple selectors separated by combinators.

a b c, d e f is called the group of selectors where the group members are the selectors a b c and d e f. a b c is a selector, or sequence of simple selectors, composed of the simple selectors a, b, c combined by the combinator whitespace. The last sentence is only valid for CSS3.

Upvotes: 3

Related Questions