marcel marcel - 4 months ago 17
CSS Question

Can pseudo-elements be used alone in CSS?

According to W3C, the definition of a selector does not cover a pseudo-element:
https://www.w3.org/TR/css3-selectors/#selector-syntax

The above link says:


A selector is a chain of one or more sequences of simple selectors
separated by combinators.


and it also says:


A simple selector is either a type selector, universal selector,
attribute selector, class selector, ID selector, or pseudo-class.


Regarding how a pseudo-element should be used, it says:


One pseudo-element may be appended to the last sequence of simple
selectors in a selector.


and


Only one pseudo-element may appear per selector, and if present it
must appear after the sequence of simple selectors that represents the
subjects of the selector.


So does that mean that a pseudo-element can only be a suffix to a "valid" selector and should not be used alone?

Answer

does that mean that a pseudo-element can only be a suffix to a "valid" selector and should not be used alone?

Your conclusion is not true, because the universal selector * can be omitted.

If a universal selector represented by * [...] is immediately followed by a pseudo-element, then the * may be omitted and the universal selector's presence implied.

So you can use a pseudo-element alone, e.g. ::before, because under the hood it will be treated like *::before.

::before {
  content: 'Hello!';
}