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
Jochem
Jochem15mo ago
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
Hamza Naeem
Hamza Naeem15mo ago
this is good practice or not? *, *::before, *::after { box-sizing: border-box; padding: 0; margin: 0; }
Jochem
Jochem15mo ago
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
*,
*::before,
*::after {
box-sizing: border-box;
}
* {
padding: 0;
margin: 0;
font: inherit;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
* {
padding: 0;
margin: 0;
font: inherit;
}
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
Hamza Naeem
Hamza Naeem15mo ago
got it thanks
Hamza Naeem
Hamza Naeem15mo ago
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.
Jochem
Jochem15mo ago
I think maybe you didn't save the codepen, I don't see the margins set to zero with the universal selector in that
Hamza Naeem
Hamza Naeem15mo ago
check now
Mannix
Mannix15mo ago
you have margin-top: 2rem; on your nav-item that is why it goes down
Jochem
Jochem15mo ago
That's because you set the margin-top to 2rem higher up:
.nav__item {
list-style: none;
margin-top: 2rem;
}
.nav__item {
list-style: none;
margin-top: 2rem;
}
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!
Hamza Naeem
Hamza Naeem15mo ago
Thanks for your help, Mannix and Jochem, I am new on media queries.
Want results from more Discord servers?
Add your server