Chaining Selectors

You can also join selectors without any space or comma. Then an element must match all of them at once:

div.group {
	color: purple;
}

The selector div.group selects the elements that are a div and also have the class group. A p element with the class group wouldn’t be selected, and neither would a div without the class. This is called chaining. It isn’t new to you: a[target="_blank"] and a:hover from the previous exercises are chained selectors too.

Chaining is useful for two reasons. First, it selects elements more precisely, for example only the groups that are under the mouse pointer: .group:hover. Second, a chained selector wins over each of its parts. The groups now have a linen background from the rule for .group. When you give them another background with a rule for .group:hover, it wins over .group, so the background changes on hover. You’ll find out exactly why in the exercise on specificity.

Mind the difference: div.group (no space) is not the same as div .group (with a space), which you’ll meet in the next exercise, or div, .group (with a comma), which groups the selectors.