CODEWITHSUNDEEP
csscss-selectorspseudo-element
marcel
marcel

Reputation: 77

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?

Upvotes: 9

Views: 337

Answers (1)

Oriol
Oriol

Reputation: 287950

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!';
}

Upvotes: 8

Related Questions