CSS Syntax / Nomenclature

Question

I do know how CSS works but I'm not sure how to call each component of the "selector". The more I search, the more I get confused. Every site has a different point of view or they just call everything the same thing.

let's take the following as an example:

div#parent.class > div#child.class, div#otherId.class

---

what is called each part?

1. The whole thing

   div#parent.class > div#child.class, div#otherId.class

2. Each part of 1 (separated by the commas)

   div#parent.class > div#child.class and div#otherId.class

3. Each part of 2 (separated by combinators, e.g. >)

   div#parent.class, div#child.class and div#otherId.class

4. Each part of 3

   div, #parent, .class and so on.

---

People often don't care about it and call all of them "selectors". But selectors can't be made of selectors, which are also made of smaller selectors...

Other sites try to define them but things get even more confused:

• number 1 is refered to as "group of selectors"
• number 2 as "selectors". Makes sense if you call 1 "group of selectors"
• they don't define number 3
• each type of 4 has its name (e.g. ID selectors, Class Selectors, Attr Selectors, etc.)

Isn't there a convention/official definition? I'm stuck on a situation where I need to store them on variables, but I don't know how to call each of them...

Answer 1

The Selectors 3 spec is as you have it .

3 is called a sequence of simple selectors

The collective term for 4 is "simple selector".

---

But the Selectors 4 draft spec changes the terminology a bit. There:

1 = "Selector list"

2 = "Complex selector"

3 = "Compound selector"

4 = "Simple selector"