« Back to post

:first-letter, :first-line, :hover and :first-child

The :first-line selector turns this paragraph's first-line to uppercase. The :first-letter selector makes the first letter larger, bold and green. The :hover selector is applied to this paragraph and the following and makes the text turn red when passing the mouse over them.

This paragraph also turns red when the mouse passes over it. However, the :first-child selector makes the :first-letter and :first-line selectors apply only to the above paragraph.

This paragraph should act exactly as the second one.

:first-child, :last-child and :nth-child(N)

  1. Bold is applied to the first item with the :first-child selector
  2. Even items have a gray background applied using :nth-child(even)
  3. Multiples of 3 are set to blue using :nth-child(3n)
  4. Even items have a gray background applied using :nth-child(even)
  5. This item matches no selector
  6. Even items have a gray background applied using :nth-child(even)
  7. This item matches no selector
  8. Even items have a gray background applied using :nth-child(even)
  9. Multiples of 3 are set to blue using :nth-child(3n)
  10. Bold is applied to the last item with the :last-child selector

::selection

This paragraph uses the ::selection selector (::-moz-selection in Firefox). If you select text in this paragraph, its background will be green. Go ahead and try it!

Compare with this regular paragraph. If you select text here its background will be the default selection color.

:not(S)

The :not selector negates selectors. It is used below to turn green the items that are not a multiple of 3.

  1. Not a multiple of 3
  2. Not a multiple of 3
  3. A multiple of 3
  4. Not a multiple of 3
  5. Not a multiple of 3
  6. A multiple of 3
  7. Not a multiple of 3
  8. Not a multiple of 3
  9. A multiple of 3
  10. Not a multiple of 3

« Back to post