Content updated
By the end, you can…
- First ask whether a selector matches. Then compare the competing declarations for each property.
- Explain the example, change one value, and check the result in your own page.
One idea at a time
A selector is a pattern for choosing elements. A class is a reusable label you write in an HTML class attribute; an id identifies one element in a document. Use classes for repeated styling. Put class="note" in HTML and .note in CSS: the dot belongs to the selector, not the attribute value.
Several rules can match the same element without being a problem. One may set color while another sets font-size. When they set the same property, the cascade decides the winner. Specificity is the priority calculated from a selector: IDs count before classes, and classes before tag names. Source order means the order the rules appear in the stylesheet. For these plain stylesheet rules, specificity decides first; when specificity ties, the later declaration wins. Do not assume that the last rule always wins.
What to remember first
First ask whether a selector matches. Then compare the competing declarations for each property.
Read the CSS before trying it
p / .note / #page-titleType, class, and ID- Match a tag name, a class value, or an id respectively. An ID selector has more specificity than a class; a class has more than a type.
*All elements- The universal selector matches elements without adding specificity. Avoid removing every default spacing before understanding it.
h1, pEither selector- A comma groups separate selectors sharing declarations.
.notebook pAny descendant paragraph- A descendant is an element anywhere inside another element. The space can cross several nesting levels inside notebook. A direct child is just one level inside.
.notebook > pDirect child paragraph- The > restricts the match to one parent-child step.
:hover / :first-child / :nth-child(2)State or position- Hover means the pointer is over the element. Siblings share a parent; the other selectors test positions among that parent’s element children. Lesson 12 explains states and parts in more depth.
Walk through an example
<div class="notebook">
<h1 id="page-title">Garden notebook</h1>
<p class="note">A direct note.</p>
<div>
<p class="note">A nested note.</p>
</div>
</div>
<p>A paragraph outside the notebook.</p>.notebook > p {
color: #166534;
}
p {
color: #1e3a8a;
}The direct note matches both rules, but the class and child pattern is more specific than p alone, so it is green even though the p rule is later. The nested note is not a direct child of notebook, so it stays blue. The paragraph outside notebook also matches only p. Read the HTML nesting before predicting a match.
See it happen: try a small change
Predict what will change, choose a version, and compare the live result with the CSS. Use the real controls when the example includes them.
Code to notice
p {
color: #1e3a8a;
}Live result
What changed: Every p matches, including the paragraph outside notebook.
Look a little closer
Inheritance is another route to a value: text properties such as color often pass from a parent to its children when the children have no directly specified value. Padding and borders do not generally inherit. A directly specified child color wins over an inherited parent color even when the parent's selector is more specific.
For equally specific rules at the same cascade level, the later declaration for that property wins. Inline styles and the !important annotation introduce other priorities. Advanced stylesheets can also group rules into cascade layers. You do not need those features for this task; compare the plain rules shown here. Adding more IDs or !important to force a result makes the next change harder to reason about.
Try it in your own project
Reuse the linked stylesheet from lesson 1, replacing its rules with this example so old colors do not interfere. Copy the notebook markup inside body. Predict the color of all three paragraphs before refreshing, then change > to a space and identify which additional paragraph matches.
The preview uses a small set of readable starting styles for its font, spacing, and controls. The code to notice shows the lesson's own rules. Your local browser defaults may look different before you add those rules; focus on the relationship being demonstrated rather than matching every pixel of the preview.
A common wrong turn
Changing .notebook p to .notebook > p changes the elements selected, not just the strength of the selector. Check matches before trying to fix specificity. Do not duplicate an id across several cards to share a style; use a class.
Your turn: choose elements with CSS selectors
Build a notebook containing one direct paragraph and one paragraph inside another div, plus a paragraph outside. Style only the direct paragraph, then expand the rule to both paragraphs inside the notebook.
Try this task in your own index.html and styles.css files. Save both files and refresh your browser to see changes. Continue below follows the course order, including its practice checkpoint.
Related practice in the course path
This practice appears in CSS fundamentals, step 6. Follow Continue below to reach it after its prerequisites.
For related guided practice, Style a reading card gives you starter code, a live preview, hints, and checks. The task above is a separate variation to try in your own project.
- Add the notebook class and compare the nesting with the example.
- Predict the matched paragraphs before changing the space to > or back again.
- Add two competing .note rules with different colors. Reverse them and explain why order matters only after the matching priority ties.
Go to the source
Examples are authored for Tuklas and checked with code and reference documentation. This is not a claim of independent human review. Suggest a correction.