Does the Universal Selector (*) Affect Pseudo-Elements Like :before and :after?

Universal Selector (*) and Pseudo-Elements (:before, :after)

Does the universal selector (*) extend its influence to pseudo-elements like :before and :after? For instance, when using:

* { box-sizing: border-box; }

Will it automatically affect pseudo-elements or is it necessary to explicitly declare:

*, *:before, *:after { box-sizing: border-box; }

Contrary to intuition, the universal selector does not directly impact pseudo-elements (aside from indirect inheritance). This is because :before and :after are separate entities from actual elements and are represented by abstractions.

Simple selectors like * can only target actual elements, not pseudo-elements. To style :before and :after, you must include them explicitly in your selector.

The reason you may not have encountered issues despite using only * may be because pseudo-elements default to inline display, which is not affected by box-sizing.

Remember, when using multiple simple selectors, including * is optional for clarity. Additionally, while the current Selectors specification uses double colons to denote pseudo-elements, older browsers support single-colon notation for box-sizing resets.

Although :before, :after applies styles to pseudo-elements of all elements, they will not be generated until you declare the content property. This does not pose any performance concerns.

The above is the detailed content of Does the Universal Selector (*) Affect Pseudo-Elements Like :before and :after?. For more information, please follow other related articles on the PHP Chinese website!