Selector Types and Combinators

## Three kinds of punctuation, three meanings CSS selector syntax packs a lot of meaning into characters that are easy to skim past. Between two class selectors there are three possibilities, and each builds a structurally different query. ### No separator: a compound selector `.card.featured` is one *compound selector*. A compound selector is a run of simple selectors — type, class, ID, attribute, pseudo-class — written with nothing between them, and **every part must match the same element**. Order within the compound does not matter, so `.featured.card` is equivalent, with one syntactic rule: if a type selector is present it must come first, so you write `a.btn[target]`, never `.btn a`-style reordering. ```css .card.featured { border-color: gold; } ``` ```html <div class="card featured">matched</div> <div class="card">not matched</div> <div class="featured">not matched</div> ``` The same principle applies across selector kinds: `input[type="checkbox"]`, `li.active`, `#main.dark` are all compounds requiring one element to satisfy every part. ### Whitespace: the descendant combinator `.card .featured` inserts a combinator, so the selector now describes **two** elements and a relationship between them: a `.featured` element with a `.card` ancestor at any depth. The element that actually receives the declarations is the rightmost one, `.featured`. ```html <div class="card"><span class="featured">matched</span></div> <div class="card featured">not matched</div> ``` Note the second line carefully: an element cannot be its own descendant, so a single element carrying both classes is matched by the compound but *not* by the descendant selector. This is the exact pair interviewers use to check whether you read whitespace as syntax. ### Comma: a selector list `.card, .featured` is a *selector list* (the specification's term; "grouping" in older material). The comma does not create any relationship. It is shorthand for writing the same declaration block twice: ```css .card, .featured { padding: 1rem; } /* identical in effect to */ .card { padding: 1rem; } .featured { padding: 1rem; } ``` Each selector in the list is matched and weighted independently — the list itself contributes nothing. ## The invalid-selector rule There is one behaviour of selector lists that surprises people and shows up in real bugs. If **any** selector in a comma-separated list is invalid or unrecognised by the browser, the *whole rule* is dropped, including the parts the browser understood perfectly well: ```css /* one unknown pseudo-class poisons the entire rule */ .button, .link:some-unsupported-thing { color: red; } ``` Neither `.button` nor the link gets `color: red` in a browser that does not know that pseudo-class. This is why a single experimental or vendor-specific selector must be given its own rule rather than being folded into a shared list — a habit worth keeping even though the selectors involved change over time. ## Compounds and combinators together Real selectors mix all three. `.card.featured > .title, .card.archived > .title` is a list of two selectors, each of which chains a compound (`.card.featured`) to another compound (`.title`) with the child combinator. When reading such a selector aloud, split on commas first, then read each selector right to left. ## Why the space bug is so common The compound/descendant distinction is invisible in a diff view, produces no error, and silently changes which elements a rule reaches — usually to *none*, because the intended element carries both classes rather than nesting them. Symptoms are a rule that appears in the stylesheet, is spelled correctly, and simply never applies. When a class-based rule mysteriously does nothing, checking for an accidental space between the two class selectors is one of the fastest things to rule out. The reverse mistake also happens: writing `.modal.close` when the close button is a child, so the rule silently targets a nonexistent element that is both a modal and a close button. ## Reading habit Before committing to an answer, tokenise the selector out loud: "class card, *no space*, class featured — same element" versus "class card, *space*, class featured — one inside the other" versus "class card, *comma*, class featured — two separate rules". Saying the punctuation aloud is what stops the mistake.