These four families (type, class, id, attribute) plus the four combinators are enough to target almost any element you can describe with a single sentence. Attribute selectors are underused: [type="email"] is far more robust than .email-input because it follows the actual semantic of the input rather than a class name that can rot. The descendant combinator is whitespace; the child combinator is >; the adjacent sibling is +; the general sibling is ~. Combinators read left-to-right but the browser actually matches right-to-left, which is why deep selectors are slower; keep them shallow when you can.

State pseudo-classes (:hover, :focus-visible, :disabled, :checked) and structural ones (:first-child, :nth-child, :nth-of-type) cover the vast majority of dynamic styling needs. Use :focus-visible instead of :focus for keyboard outlines so mouse clicks do not get a halo. The newer :is(), :where(), and :not() group and exclude selectors; the key difference is specificity: :is adopts the highest specificity of its arguments, while :where always contributes zero, which makes it ideal for low-specificity baseline rules that callers can override with a single class. :nth-child(2n + 1) and :nth-child(odd) are equivalent; pick whichever reads clearer for the rule at hand.

Pseudo-elements address parts of an element the DOM does not expose directly: the imaginary boxes before and after content (::before, ::after), the first letter or line of a paragraph, the placeholder of an input, the user's selection. The content property is mandatory on ::before and ::after; without it, the browser will not generate the box. The double-colon syntax distinguishes pseudo-elements from pseudo-classes (single colon) and is the standard going forward. Keep generated content presentational, not informational, because screen readers may skip it; never put critical text inside content.

Specificity is the tiebreaker when two rules target the same element with conflicting declarations. Memorize the four-component count and you can predict which rule wins without opening DevTools. The modern best practice is to keep selectors flat (one class is usually enough) and use :where() for resets and base styles so authoring code can override them with a single class. !important should be a last resort because it removes you from the cascade entirely; the only legitimate uses are utility classes that must always win (.sr-only, .hidden) and accessibility overrides like prefers-reduced-motion resets.