Selectors

Target elements by type, class, state, and relationship without overfitting.

Updated Aug 13, 2026Tested with Modern CSS

Selectors connect rules to elements. Good selectors express a stable role in the interface rather than depending on a fragile chain of containers.

Common selector types

selectors.css

01p { max-width: 65ch; }             /* type */
02.course-card { padding: 1.5rem; }  /* class */
03#main { scroll-margin-top: 5rem; }  /* id */
04[aria-current="page"] { font-weight: 700; } /* attribute */
05a:hover { text-decoration-thickness: 2px; } /* pseudo-class */

Classes are usually the best reusable styling hook. IDs are useful for document targets but create high selector specificity.

Relationships and grouping

relationships.css

01.course-card h2 { margin-block: 0; }
02.course-card > footer { border-top: 1px solid #ddd; }
03.course-card + .course-card { margin-top: 1rem; }
04:is(h1, h2, h3) { text-wrap: balance; }

A space selects descendants, > direct children, and + the next sibling. :is() groups alternatives cleanly; :where() does the same with zero specificity.

Select by state

states.css

01button:hover { background: #eee7f1; }
02button:focus-visible { outline: 3px solid #f46537; }
03input:invalid:not(:placeholder-shown) { border-color: #b42318; }

Keep this

Prefer short class selectors, use relationships sparingly, and style interaction states deliberately.

Your place is saved on this device.