Understand the idea

A CSS selector identifies elements to which a declaration applies. A type selector matches a tag name, a class selector starts with a dot, and an ID selector starts with a hash.

Classes are reusable: several elements can share the same class. An ID should identify one element in the document. A space between selectors means a descendant relationship; it does not mean that two names belong to one element.

Read the example

This is a CSS fragment. Put it in a stylesheet and supply the matching HTML described in the exercise.

CSS · EXAMPLE
.note { color: #6542d7; }
article p { line-height: 1.7; }
.note.important { font-weight: 700; }

A small mistake, explained

What goes wrong

Writing .note .important selects an important descendant inside a note. It does not select one element with both classes.

How to fix it. Remove the space when both classes must belong to the same element. Check the matched rules in browser developer tools.

Try it yourself

Create a paragraph with class="note important". Compare .note.important with .note .important.

Further reading

W3C — Selectors

Original explanation and example prepared for HTML code FYI with AI assistance. Test the code in your own context. How these guides are made.