Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

What is that thing between CSS "selectors" called?

What do you call these:

body > p + p

in a CSS selector? Are they:

  • Relational operators
  • Position-based criteria
  • Something else?

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?)

like image 272
Ry- Avatar asked Dec 03 '11 19:12

Ry-


2 Answers

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
like image 167
Tom Haws Avatar answered Oct 16 '22 09:10

Tom Haws


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

  • The space is the combinator used in a CSS descendent selector.
  • > is the combinator used in a CSS child selector.
  • + is the combinator used in a CSS adjacent sibling selector.

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.

like image 7
Duncan Babbage Avatar answered Oct 16 '22 08:10

Duncan Babbage