Selectors

Chapter 2

Figures

  1. Simple styling of a simple document
  2. Moving a style from one element to another
  3. The results of a property value with multiple keywords
  4. The result of equivalent style sheets
  5. Grouping both selectors and rules
  6. Using a class selector
  7. Using generic and specific selectors to combine styles
  8. Selecting elements with multiple class names
  9. Selecting elements based on their attributes
  10. Selecting elements based on attributes and their values
  11. Selecting elements based on portions of attribute values
  12. Selecting elements based on substrings within attribute values
  13. Selecting elements based on substrings that begin attribute values
  14. Selecting elements based on substrings that end attribute values
  15. A document tree structure
  16. Selecting an element based on its context
  17. A very specific descendant selector
  18. Using descendant selectors to apply different styles to the same type of element
  19. A document tree fragment
  20. Another document tree fragment
  21. Selecting adjacent siblings
  22. Selecting following siblings
  23. Styling the root element
  24. Selecting images that are only children inside links
  25. Selecting images that are only children inside links
  26. Selecting images that are the only sibling of their type
  27. Styling first children
  28. Styling last children
  29. Selecting first-of-type tables
  30. Selecting last-of-type tables
  31. Styling second children
  32. Styling every third list item
  33. Styling every other table row
  34. Combining patterns of :nth-child() and :nth-last-child()
  35. Selecting the even-numbered links
  36. Highlighting a form element that has focus
  37. Changing layout with dynamic pseudo-classes
  38. Styling enabled and disabled UI elements
  39. Styling checked and indeterminate UI elements
  40. Styling valid and invalid UI elements
  41. Styling a fragment identifier target
  42. Styling list items that don’t have a certain class
  43. Styling elements with a certain class that aren’t list items
  44. Styling table cells that aren’t in the table’s header
  45. The ::first-letter pseudo-element in action
  46. The ::first-line pseudo-element in action
  47. Inserting content before an element