Combinators and attribute selectors

Type, class and ID selectors look at one element on its own. Combinators let you select an element based on where it sits in the HTML, and attribute selectors let you select by any attribute. This lesson is a reference you can come back to.

The four combinators

A combinator goes between two selectors and describes how the elements are related.

All the examples below use this HTML:

<article class="post">
    <h2>Recipe</h2>
    <p>Intro paragraph.</p>
    <p>Second paragraph.</p>
    <div class="note">
        <p>A paragraph inside a note.</p>
    </div>
    <p>Final paragraph.</p>
</article>

Descendant combinator: a space

.post p {
    color: #334e68;
}

Matches all four paragraphs, including the one inside .note. The space means "anywhere inside, at any depth".

This is the combinator you will use most. Keep descendant chains short: .post p is fine, but body main .content .post div p is fragile and very specific. Any change to the HTML structure breaks it.

Child combinator: >

.post > p {
    margin-bottom: 1rem;
}

Matches the three paragraphs that are direct children of .post, but not the one inside .note, which is a grandchild. Use > when nested components have elements of the same type and you do not want styles to leak into them.

.menu > li {
    display: inline-block;   /* only the top level, not nested sub-menus */
}

Next-sibling combinator: +

h2 + p {
    font-size: 1.125rem;
}

Matches only the "Intro paragraph", the first <p> straight after the <h2>. Both must share a parent. A common use is styling the lead paragraph after a heading, or adding space between consecutive items:

.field + .field {
    margin-top: 1rem;   /* every field except the first */
}

Subsequent-sibling combinator: ~

h2 ~ p {
    color: #486581;
}

Matches "Intro paragraph", "Second paragraph" and "Final paragraph": every <p> sibling that comes after the <h2>. The paragraph inside .note is not a sibling, so it does not match.

Combinators and specificity

Combinators add nothing to specificity; only the simple selectors count. .post > p and .post p both score (0, 1, 1). The choice between them is about which elements match, not which wins.

Attribute selectors

Attribute selectors match elements by their attributes, written in square brackets.

Add a space and i before the closing bracket to match case-insensitively: [href$=".pdf" i] also matches .PDF.

Practical examples

Style form inputs by type:

input[type="email"],
input[type="password"] {
    width: 100%;
    max-width: 24rem;
}

input[type="checkbox"] {
    width: 1.25rem;
    height: 1.25rem;
}

Mark links to external sites and PDF files:

a[href^="http"] {
    text-decoration-style: dotted;
}

a[href$=".pdf" i] {
    font-weight: 600;
}

Highlight elements by language:

[lang|="fr"] {
    font-style: italic;   /* matches lang="fr" and lang="fr-CA" */
}

Styling with state attributes

ARIA and HTML state attributes make reliable hooks, because the styling stays in sync with the state that assistive technology reads:

<button class="menu-toggle" aria-expanded="false">Menu</button>

.menu-toggle[aria-expanded="true"] {
    background-color: #102a43;
    color: white;
}

[hidden] {
    display: none !important;
}

When JavaScript changes aria-expanded to "true", the style updates automatically. You do not need a separate .is-open class that could drift out of sync. The [hidden] rule is one of the rare fair uses of !important: it makes sure the hidden attribute always hides an element, even if a class sets display: flex.

Data attributes

Custom data-* attributes are another useful hook, especially for variants:

<span class="badge" data-status="paid">Paid</span>
<span class="badge" data-status="overdue">Overdue</span>

.badge[data-status="paid"] {
    background-color: #e3f9e5;
    color: #05400a;
}

.badge[data-status="overdue"] {
    background-color: #ffe3e3;
    color: #610404;
}

Combining everything

Selectors can be combined freely:

.post > h2 + p,
.form input[type="text"] ~ .hint {
    color: #486581;
}

Readability suffers quickly, though. If a selector needs more than two or three parts, it is often clearer to add a class to the element in the HTML.

Debugging relationship selectors

1. Inspect the element you expected to match. Look at the breadcrumb trail at the bottom of the Elements panel to see its real ancestors.
2. Check whether there is an extra wrapper element. A > selector fails as soon as a <div> sits between parent and child.
3. For +, check for elements in between, including ones you cannot see, such as a hidden <input>.
4. In the Elements panel, press Ctrl+F (Cmd+F on macOS) and type a CSS selector. Chrome and Edge highlight every element it matches.

Summary

• A space selects descendants at any depth; > selects direct children only.
• + selects the next sibling; ~ selects all following siblings with the same parent.
• Combinators do not add specificity; keep chains short to avoid fragile CSS.
• Attribute selectors match existence, exact values, prefixes, suffixes and substrings.
• State attributes such as aria-expanded and data-* attributes make reliable styling hooks.