Select all pseudo elements and classes

Question

There are a bunch of pseudo elements and classes:

Pseudo Elements:

::after, ::before, ::first-letter, ::first-line, ::selection, ::backdrop

Pseudo Classes:

:active, :checked, :default, :dir(), :disabled, :empty, :enabled, :first, :first-child, :first-of-type, :fullscreen, :focus, :hover, :indeterminate, :in-range, :invalid, :lang(), :last-child, :last-of-type, :left, :link, :not(), :nth-child(), :nth-last-child(), :nth-last-of-type(), :nth-of-type(), :only-child, :only-of-type, :optional, :out-of-range, :read-only, :read-write, :required, :right, :root, :scope, :target, :valid, :visited

And there also others like ::-webkit-input-placeholder, ::-moz-placeholder and so on. I don't know what elements they are. But I think they are pseudo elements as it has double colons.

There's an asterisk selector * to select all elements that are inside DOM-Tree.

Now, I'm curious to know why there's no single selector for selecting all pseudo elements and pseudo classes that are outside the DOM-Tree even in css3 or css4?

*pseudo{
  color: red;
}

Answer 1

* selects any element regardless of its nature or state. In this way, it already covers all pseudo-classes, just with zero specificity.

For example, * will match any element regardless of whether it is :first-child, :last-child, or both (which itself can be expressed using either :only-child or :first-child:last-child). It will also match any link whether it is unvisited (:link) or visited (:visited), and whether or not it matches one or more of :hover/:active/:focus.

If you're looking for a way to override any and all CSS rules with pseudo-classes for a given element (which can be useful in the case of dynamic pseudo-classes such as the one for links), the only ways are to use an ID selector, an inline style attribute, or !important.

* doesn't match pseudo-elements because it is a simple selector, and a simple selector only matches actual elements. See my answer to this question for a detailed explanation.

The likely reason that there isn't a selector for matching all pseudo-elements is because it doesn't make sense to have one, since different pseudo-elements work differently and have different restrictions as to which CSS properties may be applied to them. For example, content and display don't apply to ::first-letter, ::first-line or ::selection. But the universal selector exists because elements themselves don't define what CSS properties are applicable (not usually, anyway); as far as CSS is concerned, every element is more or less equal.