A CSS selector identifies the HTML elements a rule will style. In `h1 { color: crimson; }`, `h1` is the selector; `color: crimson` is the declaration. Write selectors before the opening brace, and separate them with commas when one rule should target several kinds of element. section 1.3.2
Start with selectors that match the HTML already on the page:
- A type selector, such as `h1`, targets elements by tag name without changing the HTML. section 1.6.1
- A class selector, such as `.small-heading`, targets elements sharing a class. Choose names that still make sense if the design changes. section 1.6.1
- An ID selector, such as `#quote-by-author`, targets an element through its ID. section 1.6.1
Combinators narrow a match using relationships in the HTML. A space selects descendants at any depth; `>` selects only immediate children. `+` targets an immediately following sibling, while `~` targets following siblings more generally. These relationships can avoid adding a class to every element you want to style. section 1.6.2
Style only the outer list items
Given a list containing another list, `.list > li { color: crimson; }` targets only the outer list’s immediate `li` children. Unlike a descendant selector, it does not directly select the nested `li` elements. Their text can still inherit the color; `.list > li ul { color: initial; }` resets the nested list. section 1.6.2
Pseudo-classes select a state: `a:hover` styles a link under the pointer, and `a:focus` styles one with focus. Pseudo-elements select a part of an element: `header + p::first-letter` targets the first letter of the paragraph immediately after a header. Link states matter for keyboard interaction as well as pointer interaction. section 1.6.3
When rules compete, the selector’s specificity helps determine which declaration applies. ID selectors outweigh class selectors; class selectors outweigh type selectors. Inherited values also matter, and a later rule can win a specificity tie. If a style seems missing, check which elements the selector matches, then check inheritance and competing rules. section 1.5
Align checkout-cart headers
Within a `min-width: 550px` media query, `th { text-align: left; }` left-aligns table headers. A more specific `th:nth-of-type(n+3)` rule right-aligns headers from the third column onward. The broad rule establishes a starting style; the narrower selector handles the exception. section 8.4.2
