Exercise 8/10 I wouldn't expect this line of CSS to work but it does. Why?

Learn CSS: Typography Exercise 8/10:

Step 2 of the exercise’s instructions says, “…inside the .space ruleset, create a declaration using ‘Space Mono’, as the value.”

Sure enough, this changes the font to 'Space Mono." But if you look at the corresponding HTML, wouldn’t you expect to find

class=“space”

somewhere? Instead you will find,

class=‘font-card space’

How is it that you can target this element by using ‘.space’ as a selector when the class is called, ‘font-card space’ ? Interestingly, you can also target this element using ‘.font-card’ as a selector but using ‘.font-card space’ or .‘font-card space’ will not work.

What’s going on here? I don’t recall seeing a string of HTML as a class before, which is why it’s raising some questions.

In HTML, classes cannot have spaces in them. The reason being that you want the ability to add multiple classes to any particular HTML tag, and you do this by separating them with a space. Therefore in this example, the tag doesn’t have a single class, it has two classes, font-card and space. This is often used because you can have multiple different reasons to target something, and you want to have different selectors to ensure that different groups are specified. However these groups can overlap and that’s where multiple classes come into play.

1 Like

Thanks, Adam. That makes sense now that you’ve broken it down.