What does it mean and why to use?
I have seen many people using this:
*,
*::before,
*::after {
} why they use this, what it means in simplest words?
11 Replies
it's a way to set a couple of properties on all elements, including the before and after pseudoelements
* targets every element, except for the pseudoelements, that's what the before and after ones are for
this is good practice or not?
*,
*::before,
*::after {
box-sizing: border-box;
padding: 0;
margin: 0;
}
I'm not a fan, personally. I know some people like to reset padding and margin on everything, but I'd rather be specific
that said, it's down to personal preference, though it's important to not go too wild with the * selector too
One of Kevin's YouTube Shorts includes something quite similar https://www.youtube.com/watch?v=2lyDv0wOQuQ
iirc, there's a reason you don't want to set padding and margin to zero on ::before and ::after, but I can't quite remember what it was
got it thanks
But it is confusing here, if I have used a universal selector to make margin 0, then on .nav__item class when I set margin to zero, the text moves side by side with logo which I want, but when I comment it, it goes down, I mean if margin is 0 universally then why I have to make it zero again in the class., really confusing.
I think maybe you didn't save the codepen, I don't see the margins set to zero with the universal selector in that
check now
you have
margin-top: 2rem; on your nav-item that is why it goes downThat's because you set the margin-top to 2rem higher up:
so you're setting it to 0 with *, to 2rem with that rule, then back to 0 in the media query
CSS rules apply by top down in addition to by specificity, so if you have three
.nav__item { selectors, the properties in all three will merge with the last version of each property encountered by the parser taking precedence
oh hey, Mannix already answered, I totally missed that. Sorry!Thanks for your help, Mannix and Jochem, I am new on media queries.