Phase 1Beginner2 of 12 in CSS

Selectors

How CSS points at elements: type, class and ID selectors, combinators, attributes, pseudo-classes, :is/:where/:has and pseudo-elements.

Every CSS rule starts with a selector: the part that says *which* elements the rule applies to. If the selector is wrong, nothing else in the rule matters, because it never reaches the element. This phase teaches every kind of selector you'll use in real projects, from p and .card to li:nth-child(2n+1) and .card:has(img).

You'll start with the three basic selectors (type, class, ID), then learn to describe relationships between elements with combinators, match on attributes, react to state with pseudo-classes (hover, focus, checked, position in a list), combine conditions with :not(), :is(), :where() and :has(), and finally style parts of elements that aren't in the HTML at all with pseudo-elements.

Along the way you'll see how each selector affects specificity (the score that decides which rule wins; Phase 2 goes deep on it), how browsers match selectors right to left, and which selectors cause accessibility or performance trouble. Every example is live: edit the selector and watch which elements light up.

0/6 · 0%

6 topics ~2 h 18 code blocks & diagrams

Start with the first topic

1.1

Type, Class and ID Selectors

Type selectors match every element of one kind, class selectors match every element carrying a class name, ID selectors match the one element with that id; the universal selector matches everything and commas group several selectors into one rule.

25 min 3 code practice

1.2

Combinators

Combinators join two selectors by a relationship: a space means "anywhere inside", > means "directly inside", + means "the very next sibling" and ~ means "any later sibling".

19 min 3 code practice

1.3

Attribute Selectors

Attribute selectors match elements by their attributes: whether an attribute exists, equals a value, or starts with, ends with or contains some text, optionally ignoring upper and lower case.

19 min 3 code practice

1.4

Pseudo-classes

Pseudo-classes start with one colon and match elements by their state (hovered, focused, checked, disabled, visited) or by their position among siblings (first, last, every second, empty).

26 min 3 code practice

1.5

:not, :is, :where and :has

Four functional pseudo-classes add logic to selectors: :not() excludes, :is() and :where() say "any of these" (with full or zero specificity), and :has() selects an element by what it contains or what follows it, the long-awaited parent selector.

26 min 3 code practice

1.6

Pseudo-elements

Pseudo-elements start with two colons and style a part of an element that has no tag of its own: generated boxes before or after its content, its first letter or line, the placeholder, the selected text or a list marker.

26 min 3 code practice