CSS Pseudo Class vs Pseudo Element

By Xah Lee. Date: .

CSS Pseudo-Class

A CSS “pseudo-class” is a keyword that matches state of selected element. e.g. :hover.

Example:

a:visited, a:link {text-decoration:none}
a:hover {background-color:pink}

Here's complete list of pseudo-class:

  1. :active
  2. :any
  3. :any-link
  4. :checked
  5. :default
  6. :defined
  7. :dir()
  8. :disabled
  9. :empty
  10. :enabled
  11. :first
  12. :first-child
  13. :first-of-type
  14. :fullscreen
  15. :focus
  16. :focus-visible
  17. :host
  18. :host()
  19. :host-context()
  20. :hover
  21. :indeterminate
  22. :in-range
  23. :invalid
  24. :lang()
  25. :last-child
  26. :last-of-type
  27. :left
  28. :link
  29. :not()
  30. :nth-child()
  31. :nth-last-child()
  32. :nth-last-of-type()
  33. :nth-of-type()
  34. :only-child
  35. :only-of-type
  36. :optional
  37. :out-of-range
  38. :read-only
  39. :read-write
  40. :required
  41. :right
  42. :root
  43. :scope
  44. :target
  45. :valid
  46. :visited

CSS Pseudo-Element

A CSS “pseudo-element” is a keyword that control style of part of the selected element. e.g. ::first-line matches the first line of a paragraph.

Example:

p.e74775:first-letter {font-size:40px}

[see CSS: Match first-letter and first-line]

Note: in CSS 2, pseudo-element syntax is with 1 single colon. e.g. p:first-letter But in CSS 3, it's changed to 2 colons, e.g. p::first-letter, to distinguish it from pseudo-class.

Single colon is still supported in browsers.

As of 2018, most websites still use 1 single colon.

Here's a complete list of pseudo-element:

  1. ::after
  2. ::before
  3. ::cue
  4. ::first-letter
  5. ::first-line
  6. ::selection
  7. ::slotted
Liket it? Put $5 at patreon.

Or, Buy JavaScript in Depth

If you have a question, put $5 at patreon and message me.

Web Dev Tutorials

  1. HTML
  2. Visual CSS
  3. JS Basics
  4. JS in Depth
  5. JS Reference
  6. DOM
  7. SVG
  8. JS Misc