During the Build a Magazine project, we are instructed to:
“To start your CSS, normalize the CSS rules by targeting all elements with *, including the ::before and ::after pseudo-selectors.”
Although I understand the function of these pseudo elements, I don’t understand their purpose with a wildcard in the start of a CSS sheet. Are they resetting all browser defaults for box sizing, margins and padding before and after elements?
* is a universal selector that targets all HTML elements, but it doesn’t automatically include pseudo elements, so those need to be added specifically.
Thanks for the quick response. I get the use of * which has been used in the past but didn’t know the pseudo elements are not targeted. I just don’t understand why you target them and are they relating to margin and padding?
My understanding is that the universal selector is used primarily as a reset so that document layouts will be uniform across all browsers and, yes, you would target them if you want any elements accessed using those pseudo elements (e.g. input[type="checkbox"].checked::after {}) to have the margin, padding and box-sizing set consistently.