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?
1, an element can only have at most one of any kind of pseudo-element at any time. (This means an element can have both a :before and an :after pseudo-element — it just cannot have more than one of each kind.)
Adding multiple pseudo elements You can combine several CSS pseudo-elements for one element. However, you cannot use CSS ::after two times or ::before two times. In the example below, the first letter of <div> is green and has x-large font size. The first line of <div> element is red and has small capital letters.
There are currently seven pseudo-elements in CSS.
Why can't you use these pseudo elements on inputs? Because these pseudo elements are only allowed to be used on container elements. Elements like inputs, images, and any other self closing element can't use pseudo elements because they aren't “container elements”.
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!';
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With