Pseudo-Class and -Element Selectors

Chapter 3

Figures

  1. Styling the root element
  2. Selecting images that are only children inside links
  3. Selecting images that are only children inside links
  4. Selecting images that are the only sibling of their type
  5. Styling first children
  6. Styling last children
  7. Selecting first-of-type tables
  8. Selecting last-of-type tables
  9. Styling second children
  10. Styling every third list item
  11. Styling every other table row
  12. Combining patterns of :nth-child() and :nth-last-child()
  13. Selecting the even-numbered links
  14. Selecting both :nth-child and :nth-of-type table cells
  15. Styling a fragment identifier target
  16. Highlighting a form element that has focus
  17. Selecting elements using :focus-within
  18. Changing layout with dynamic pseudo-classes
  19. Styling enabled and disabled UI elements
  20. Styling checked and indeterminate UI elements
  21. Styling valid and invalid UI elements
  22. Styling list items that don’t have a certain class
  23. Styling elements with a certain class that aren’t list items
  24. Styling header cells outside the table’s head area
  25. Using :matches-any to select elements
  26. Using :has() to select elements
  27. A fragment of a document’s structure
  28. To has and has not
  29. The ::first-letter pseudo-element in action
  30. The ::first-line pseudo-element in action
  31. Styling the button in a file submission input
  32. Inserting content before an element
  33. Selection styling
  34. Targeted text styling