4 : Pseudo-classes and Pseudo-elements

Examples

  • Figure 4-1: Comparing the result of using the :nth-child() selector (left) with :nth-of-type().
  • Figure 4-2: Weather forecast table, and better formatted for readability.
  • Figure 4-3: Extra formatting of the weather forecast table using :nth-last-child().
  • Figure 4-4: Applying the :first-child and :last-child selectors.
  • Figure 4-5: Applying the :first-of-type and :last-of-type selectors.
  • Figure 4-6: Comparing :only-child and :only-of-type.
  • Figure 4-7: Highlighting applied with the :target pseudo-class.
  • Figure 4-8: Disabled and enabled element states.
  • Figure 4-9: Custom colors applied with the ::selection pseudo-element.

Browser Support

Chrome Firefox Safari IE
Structural Pseudo-classes Yes Yes Yes Yes
:tar­get Yes Yes Yes Yes
:empty Yes Yes Yes Yes
:root Yes Yes Yes Yes
:not() Yes Yes Yes Yes
Pseudo-elements (:: syntax) Yes Yes Yes Yes
UI ele­ment states Yes Yes Yes Yes
Constraint validation Yes Yes Yes IE10*
::selec­tion Yes Yes Yes Yes
  • * Does not support :in-range, :out-of-range.

A note on browser versions

Where a Yes is used in these support tables it means that the feature is supported either in an evergreen browser or in at least the last three versions of Safari (6–8) or IE (9–11). Otherwise, a version number will be shown. With regards to IE, it’s safe to presume that, with a very few exceptions, almost nothing in this book is implemented in IE8 or below.

For more complete version history I highly recommend the Can I use… compatibility tables.