CSS — Combinators

Four relationship selectors

CSS can target elements based on family ties:

Combinator	Syntax	Selects
Descendant	A B	any B inside A, at any depth
Child	A > B	only direct B children of A
Adjacent sibling	A + B	the first B immediately after A
General sibling	A ~ B	all B siblings after A

Descendant — space

nav a {
    color: teal;
}

Every <a> anywhere inside <nav> — children, grandchildren, any depth:

<nav>
    <a href="/">Direct ✓</a>
    <div>
        <a href="/deep">Deeply nested ✓ also matches</a>
    </div>
</nav>

Child — >

Strictly one level deep:

ul > li {
    list-style: square;
}

<ul>
    <li>Matches ✓</li>
    <li>
        <ul><li>Nested li — NOT matched ✗</li></ul>
    </li>
</ul>

The difference between div p and div > p is exactly this depth question.

Adjacent sibling — +

The very next element, if it matches:

h2 + p {
    font-weight: 600;    /* intro paragraph right after each h2 */
}

<h2>Section</h2>
<p>This one matches ✓</p>
<p>This one doesn't ✗ (not adjacent)</p>

Classic use: spacing between stacked items —

input + label { margin-top: 4px; }

General sibling — ~

ALL later siblings that match:

h2 ~ p {
    color: #444;    /* every paragraph after the heading */
}

Both + and ~ look only forward (downward in document order) — CSS can't select "the element before."

Practical combos

/* menu items except the last */
.menu li:not(:last-child) {
    border-right: 1px solid #ddd;
}

/* checkbox hack: style label when its input is checked */
input:checked + label {
    color: teal;
    font-weight: 700;
}

/* form rows: every field after the first gets top margin */
.field + .field {
    margin-top: 16px;
}

The checkbox + pattern powers pure-CSS toggles.

Performance & readability notes

1. Deep chains (div ul li a span) are fragile — one HTML change breaks them
2. Prefer a class on the target when practical; combinators for structural patterns that genuinely repeat
3. > communicates intent better than bare spaces — use it when depth matters

Mini Practice

1. Build nested lists; style only top-level items via >
2. Give every paragraph following an h2 an accent border with +
3. Checkbox + label toggle using :checked +
4. Space stacked form fields via .field + .field — no extra CSS classes needed
5. Break a descendant selector deliberately by restructuring HTML; feel why shallow beats deep

Next: pseudo-classes →