CSS interview question

What is the difference between Pseudo-classes and pseudo-elements?


A pseudo-class is a selector that assists in the selection of something that cannot be expressed by a simple selector, for example :hover. A pseudo-element however allows us to create items that do not normally exist in the document tree, for example ::after.


Pseudo-classes select regular elements but under certain conditions, like when their position relative to siblings or when they're under a particular state. Here is a list of pseudo-classes in CSS3:

a) Dynamic pseudo-classes:

  • :link
  • :visited
  • :hover
  • :active
  • :focus

b) UI element states pseudo-classes:

  • :enabled
  • :disabled
  • :checked

c) Structural pseudo-classes:

  • :first-child
  • :nth-child(n)
  • :nth-last-child(n)
  • :nth-of-type(n)
  • :nth-last-of-type(n)
  • :last-child
  • :first-of-type
  • :last-of-type
  • :only-child
  • :only-of-type
  • :root
  • :empty

d) Other pseudo-classes:

:not(x) :target :lang(language)


Pseudo-elements effectively create new elements that are not specified in the markup of the document and can be manipulated much like a regular element.

  • ::before
  • ::after
  • ::first-letter
  • ::first-line
  • ::selection

More Technical Interview Topics