Selectors in Depth

Reach exactly the elements you mean: by where they sit (combinators), by their attributes, by their state (hover, focus, checked) or position (first, odd, even), with pseudo-elements that add decoration, and with the modern selectors :is(), :where() and :has().

Updated

Combinators and Attribute Selectors

  1. Combinators: Descendant, Child and Sibling (Apprentice): Combinators let one selector reach elements by where they sit on the page's family tree, inside another element, directly under it, right after it or anywhere after it, with no class needed.
  2. Attribute Selectors (Apprentice): Attribute selectors reach elements by what their tags say, such as every checkbox, the song that's playing now, every link to a PDF or every link that leaves your site, with no class added.

Pseudo-Classes and Pseudo-Elements

  1. Pseudo-Classes: :hover, :focus-visible, :nth-child() and More (Apprentice): Pseudo-classes select elements by their state, such as hovered, focused, checked or disabled, or by their position, such as first, last or every other, and :not() leaves some out.
  2. Pseudo-Elements: ::before, ::after and ::marker (Apprentice): Pseudo-elements style a part of an element, or add decoration before or after it, such as a play icon, a quote mark, a list's numbers, a text box's placeholder or highlighted text, without changing the HTML.
  3. Modern Selectors: :is(), :where() and :has() (Journeyman): The :is() and :where() pseudo-classes shorten long selector lists, :where() with no specificity at all, and :has() styles an element by what it contains, so a page can react to a click with no JavaScript.

Exercise: Style a Playlist Without Adding Classes

  1. Exercise: Style a Playlist Without Adding Classes (Apprentice): Style the Road Trip Mix playlist with eight rules that reach every part through combinators, attribute selectors, pseudo-classes, pseudo-elements and :has(), without adding a single class, and let the checks confirm each one.