Selectors and Relationships Tutorial | SovranCode

Course contentsSelectors and Relationships · 16 topics

CSS Foundations

CSS Introduction Selectors and Relationships Cascade, Specificity, and Inheritance Values, Units, and Color

Layout Systems

The Box Model and Sizing Normal Flow, Display, and Positioning Flexbox CSS Grid

Applied CSS Systems

Backgrounds, Borders, and Visual Layers Interactive States and Pseudo-elements Overflow, Stacking Contexts, and Layering Transforms, Transitions, and Animation CSS Architecture, Components, and Maintenance

Responsive and Responsible CSS

Responsive Design and Container Queries Typography and Rhythm Motion, Focus, and Accessibility

CSS 47 min

Selectors and Relationships

Target elements with type, class, attribute, and relationship selectors without making rules fragile.

Selectors describe which elements a rule can affect. Classes are reusable hooks, attributes express state or capability, and combinators describe relationships. Prefer the least specific selector that reliably identifies the intended component.

See the core pattern

Read this rule set from the outside in. Identify the inputs, the decision or transformation, and the result before changing it.

.card { border: 1px solid; }
.card > h2 { margin-block-start: 0; }
.card[data-featured="true"] {
  border-color: #718817;
}
.card + .card { margin-block-start: 1rem; }

Working rules

Use classes for reusable component styling
Use child selectors only when the structure is part of the contract
Reserve IDs for document links and scripting, not routine styling

A common mistake

Long chains such as main .page section div.card h2 are hard to reuse and even harder to override safely.

Guided practice

Write a selector for direct list items inside a navigation list.

Copy the example into the editable notebook below.
Change one thing at a time and keep the program or rule valid.
Explain the result in one sentence without relying on jargon.

CSS DEEP DIVE · ABOUT 25 MIN

Style a navigation tree without leaking rules

Read the explanation, predict the visual result, then edit and run a complete example. Finish with a repair, an independent build, and a knowledge check.

Match relationships in the actual DOM

The selector .menu a matches links at any depth below .menu. In contrast, .menu > li targets only immediate list-item children. This difference matters when you add a nested submenu: a broad descendant rule can accidentally give nested items the layout intended for the outer row. Inspect the element tree, identify the relationship you need, and choose a selector that describes it. A class on the component is usually a clearer starting point than a chain tied to every wrapper in the page.

Separate structure, state, and decoration

An attribute selector such as [aria-current='page'] can style a navigation link whose current-page state already has meaning. A pseudo-class such as :hover matches a changing state, while a pseudo-element such as ::before selects a generated part. Decorative generated content should not carry essential instructions. Combine a visible label with a state indicator instead of communicating selection only through color. The :where() pseudo-class can group selectors with zero specificity, which is useful for defaults that component rules should easily override.

Watch a selector reach a nested item

Predict the difference, then compare the rendered boxes. Both versions use the same HTML.

Before repair

.menu li { border:3px solid #2458a0; padding:8px; }

After repair

.menu > li { border:3px solid #2458a0; padding:8px; }

Before: the descendant selector adds a border to both list items. After: only the direct child of .menu receives it. The nested content and HTML stay identical.

Inspect the shared HTML

<ul class="menu"><li>Lessons<ul><li>Nested CSS lesson</li></ul></li></ul>

Apply the repair in the saved editor below, then test a narrower width and longer content.

Remove the > from .menu > li. Inspect which nested item gains the border, then restore the direct-child selector.

Saved CSS practice

Edit the CSS inside the style element. Account work syncs; guest work stays on this device.

Code

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CSS practice</title>
<style>
body { font: 1rem/1.6 system-ui; padding: 2rem; }
.menu { display: flex; flex-wrap: wrap; gap: 2rem; padding: 0; list-style: none; }
.menu > li { border-top: 3px solid #254fc0; padding: .75rem; }
.menu a { color: #153b82; }
.menu [aria-current="page"] { font-weight: 800; text-decoration-thickness: 3px; }
</style>
</head>
<body>
<nav aria-label="Workshop"><ul class="menu"><li><a href="#home" aria-current="page">Home</a></li><li><a href="#lessons">Lessons</a><ul><li><a href="#css">CSS lessons</a></li></ul></li></ul></nav><p id="home">Home overview</p><p id="lessons">Lesson list</p><p id="css">CSS materials</p>
</body>
</html>

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CSS practice</title>
<style>
body { font: 1rem/1.6 system-ui; padding: 2rem; }
.menu { display: flex; flex-wrap: wrap; gap: 2rem; padding: 0; list-style: none; }
.menu > li { border-top: 3px solid #254fc0; padding: .75rem; }
.menu a { color: #153b82; }
.menu [aria-current="page"] { font-weight: 800; text-decoration-thickness: 3px; }
</style>
</head>
<body>
<nav aria-label="Workshop"><ul class="menu"><li><a href="#home" aria-current="page">Home</a></li><li><a href="#lessons">Lessons</a><ul><li><a href="#css">CSS lessons</a></li></ul></li></ul></nav><p id="home">Home overview</p><p id="lessons">Lesson list</p><p id="css">CSS materials</p>
</body>
</html>

Result

Practice here: edit your HTML or CSS and compare the result. Live preview updates after a short pause. Scripts, form submissions, and external resources are blocked. Wide previews scroll inside this panel. Running code does not grade or save it; use the separate learning and save controls.

Run in new window

Loading saved work…

Edit the CSS inside the style element and compare the result in the live preview. Your work saves automatically; you can also download a local copy.

DEBUGGING CHALLENGE

Find the faulty assumption

Explain the problem and write your repair before opening the solution.

.menu li { display: inline-block; border: 2px solid; }

Reveal repair and explanation

.menu > li { display: inline-block; border: 2px solid; }

The descendant selector also matches nested list items. The child combinator limits the rule to the outer menu's immediate children.

INDEPENDENT LAB

Build it without copying

Build a navigation list with one nested group and a current-page link. Keep nested links readable without applying the outer-item border to them.

Code

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Style a navigation tree without leaking rules lab</title>
  <style>
    *, *::before, *::after { box-sizing: border-box; }
    body { margin: 0; padding: 1rem; font: 1rem/1.6 system-ui; }
    /* Build your solution here. */
  </style>
</head>
<body>
  <main>
    <h1>Style a navigation tree without leaking rules</h1>
    <p>Replace this starter content with the structure your solution needs.</p>
  </main>
</body>
</html>

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Style a navigation tree without leaking rules lab</title>
  <style>
    *, *::before, *::after { box-sizing: border-box; }
    body { margin: 0; padding: 1rem; font: 1rem/1.6 system-ui; }
    /* Build your solution here. */
  </style>
</head>
<body>
  <main>
    <h1>Style a navigation tree without leaking rules</h1>
    <p>Replace this starter content with the structure your solution needs.</p>
  </main>
</body>
</html>

Result

Practice here: edit your HTML or CSS and compare the result. Live preview updates after a short pause. Scripts, form submissions, and external resources are blocked. Wide previews scroll inside this panel. Running code does not grade or save it; use the separate learning and save controls.

Self-review checklist

Only direct menu items receive the outer layout treatment.Current-page state uses aria-current as well as a visible style.Moving the navigation into a new wrapper does not break the component selectors.

What did you test and change?

Loading saved work…

This lab is saved separately from the worked example. The checklist is a self-review, not an automatic grade.

CSS knowledge check

Answer both questions correctly to pass this lesson check. Account scores are recomputed on the server. This is a learning check, not certification.

1. Which selector matches only immediate li children of .menu?.menu li.menu > li.menu + li

2. Which selector adds zero specificity for its arguments?:where(.menu a):is(.menu a)#menu a

Loading saved work…