Before this lesson

Know HTML basics and the roles of classes, IDs and elements.

What you will be able to do

Choose selectors deliberately, distinguish descendants, direct children and states, and organize reusable styles.

Understand the mechanism

A selector describes matching rules over the DOM. Element, class and ID selectors target different attributes. A space matches descendants, whereas > matches only direct children, which matters when nested components contain lists. An element may have several classes. Prefer role-oriented names over color names so visual redesign does not require renaming the markup.

Pseudo-classes describe states or structural conditions, such as hover, visible focus or a checked control. Pseudo-elements target portions associated with an element, such as ::before. Generated content suits decoration but should not carry essential instructions. External stylesheets support reuse; verify that the file loaded before investigating why a rule failed to match.

Runnable example

<style>
  body { font-family: system-ui, sans-serif; line-height: 1.7; }
  .note { color: #176b4b; background: #edf6ee; padding: 20px; }
</style>
<p class="note">Small steps, real progress.</p>

Trace and verify

Add a second .note paragraph and confirm style reuse. Put a span inside it, then compare descendant and direct-child selectors. Wrap the span in strong: the descendant selector still matches, but the direct-child selector no longer does. Use the Styles and Computed panels instead of piling on selectors until something appears to work.

Common mistakes and boundaries

Avoid binding every component style to IDs, and support keyboard focus rather than only hover. A longer class name is not more specific. A misspelled selector and an overridden declaration are different failures: one never matches, while the other matches but loses in the cascade.

Practice challenge

Create lesson-card and lesson-card__link classes, giving the link feedback for both pointer hover and keyboard focus.

Reference solution and reasoning

Place the base style on the class and add separate state rules. An outline does not consume layout space, so focus need not shift the card with a thicker border. Keep the link identifiable instead of relying only on the pointer cursor.

<style>
.lesson-card__link:hover { text-decoration: underline; }
.lesson-card__link:focus-visible { outline: 3px solid #286c4d; outline-offset: 4px; }
</style>
<a class="lesson-card__link" href="#practice">Practice</a>
<h2 id="practice">Practice</h2>

Further reading