Splitting up classes in selectors

I’m a little confused by the class selectors in the css for the Typography exercise, which appear to be missing words. I’ve also seen this in the paint shop project.

The HTML file reads as, for example <div class='font-card helvetica'>, or <div class='font-card garamond'>, however the corresponding CSS selectors read simply .font-card and .helvetica or .garamond.

I know there were lessons in strings of id and class selectors, and that you could also combine two class selectors here, but this seems to be dividing one class into multiple selectors based on the separate words - is that something you can do, and if so, is it good practice?

Many thanks for any guidance you can offer - I’m hoping I haven’t missed anything!

Typography exercise

The elements with the tag <div class='font-card helvetica'> have two classes. Since there is a space in the value assigned to the class attribute, we have actually assigned two separate classes to this div. One class is font-card while the other class is helvetica. Even though both the classes are written in the same quotes, the space between the two class names makes the classes separate. An underscore or hyphen can be used to write a single class name comprising of two words e,g. font-card.

In HTML, the name of a SINGLE class can’t have spaces in it. We can use hyphens and underscores, but not spaces.

3 Likes

Perfect, thanks for clearing that up with such clear explanation! Makes total sense with the rules of HTML and I was just spacing.

I was wondering if that would be the case but couldn’t find an answer in MDN and whatever google terms I was using weren’t turning up any helpful results! Thanks again!

1 Like