Search code examples
csscss-selectorspseudo-elementpseudo-class

Difference between pseudo class, pseudo selector, and pseudo element in CSS

Possible Duplicate:
What is the difference between a pseudo-class and a pseudo-element in CSS?

What do the following mean in CSS?

  1. Pseudo class
  2. Pseudo selectors
  3. Pseudo element

What is the usefulness of each?

Solution

  • Pseudo-classes are used to select elements according to information that you can't otherwise express using attributes, IDs or classes (or any other info available through the DOM). For example, :root, :first-child, :last-child, :lang() and :not().

    Pseudo-elements are mock elements that you can apply styles to selectively as part of other actual elements, but aren't themselves members of the DOM. For example, content fragments such as ::first-line and ::first-letter, or generated content such as ::before and ::after.

    "Pseudo-selectors" is an umbrella term used to cover both kinds of selectors (or really any selector that begins with at least one :), but it is itself meaningless, because in Selectors, pseudo-classes and pseudo-elements are two fundamentally different things.