Selector issues


I am on exercise 13/15 on CSS Gris Essentials, and when I took the solution route it displayed the selector classes of " .a and .b " although the class identifier in HTML is = to " box a and box b ". Why?


An element can have multiple classes assigned to it. In this case, each element has two classes.

"box a"
"box b"

We can assign different rules to each class, separately (as would be expected).

.box {}
.a {}
.b {}

If there were other elements with either a box class only, or an a or b class only, they would also be affected by these rules. We could isolate elements with both by writing the selector,

.box.a {}
.box.b {}

so it would apply only to elements with both classes. Note that there is no space between the class selectors (which would make them descendant selectors).


Thank you for explaining that! I completely forgot that I can specify more than one class in a single identifier.