Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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?

like image 875
marcel Avatar asked Jul 30 '16 16:07

marcel


People also ask

Can you have multiple pseudo elements?

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.)

How do you add multiple pseudo elements in CSS?

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.

How many pseudo elements are there in CSS?

There are currently seven pseudo-elements in CSS.

Can I use pseudo elements on input?

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”.


1 Answers

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!';
}
like image 147
Oriol Avatar answered Oct 01 '22 05:10

Oriol