How this selector is called?

Question

I just discovered this kind of selector. I felt it was sorcery!

You put in the css two simple selectors combining them.

.One {color: red;}
.Two {color: blue}
.One.Two {color: orange;}

<h2 class="One">One</h2>
<h2 class="Two">Two</h2>
<h2 class="One Two">One Two</h2>

Merged selectors? Combined selectors? Shaken, not stirred?

I want to see the support across different browsers.

I am editing for that person that did not like my original question.

This selector apears in an example on the CSS 3 spec: https://www.w3.org/TR/css3-selectors/#class-html but it has no name. It does not apear on the general table: https://www.w3.org/TR/css3-selectors/#selectors

I am thinking if it has some name, like "and" selector, "adjacent" selector or something. When looking for compatibility for example in http://caniuse.com/ one needs to be more specific.

I am doing for example tests changing the order, .Two.One vs .One.Two by trial and error. A specific documentation would be handly.

It's called just a class selector .... both three are class selectors. Different specificity but still a class selector .... Chains doesn't change the term for the selector the same as `a + a + div`it's still an adjacent selector — DaniP, Oct 14 '16 at 19:40
Reopening because the question is about naming a selector, not about selecting certain elements. — Oriol, Oct 14 '16 at 20:03

score 1 · Answer 1 · answered Oct 14 '16 at 19:01

1

.One.Two {color: orange;}

This means class that will have both Classes One and Two one after another.

This is combination of selectors

The big point here is that you can target elements that have combinations of classes and IDs by stringing those selectors together without spaces.

answered Oct 14 '16 at 19:01

Nirjhar Vermani

1,215
8
17

Yup. I understand what it is. I am wondering if it has a specific name. – Rafael Oct 14 '16 at 19:12
We generally call it combination of selectors, There is no specific name for it :) – Nirjhar Vermani Oct 14 '16 at 19:15
It is just a CSS Class selector. Here is the link to the official documentation. Notice at the end of section 5.8.3 it shows how to use them in the way you are doing it in your question. http://www.w3.org/TR/CSS2/selector.html#class-html – Zack Oct 14 '16 at 19:21
Yeap Zack I saw that too, but it is a skinny documentation. I gess I need to do some methodic experimentation. n_n – Rafael Oct 14 '16 at 19:26

Oriol · Accepted Answer · 2016-10-14T19:57:08.620

Selectors Level 3 calls it sequence of simple selectors:

A sequence of simple selectors is a chain of simple selectors that are not separated by a combinator.

In this case the simple selectors are the class selectors .One and .Two.

.One.Two is also a selector formed only by that sequence of simple selectors.

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

.One.Two is also a group of selectors formed only by that selector.

A comma-separated list of selectors represents the union of all elements selected by each of the individual selectors in the list.

In a sequence of simple selectors, order does not matter:

A selector consisting of a single sequence of simple selectors represents any element satisfying its requirements.

so .Two.One and .One.Two are equivalent.

How this selector is called?

2 Answers2