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•2y 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 NaeemOP•17mo ago

this is good practice or not? *, *::before, *::after { box-sizing: border-box; padding: 0; margin: 0; }

Jochem•17mo 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 NaeemOP•17mo ago

got it thanks

Hamza NaeemOP•17mo 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.

Hamza NaeemOP•17mo ago

https://codepen.io/hamzacodepen951/pen/qBQGJLK

Hamza Naeem

CodePen

Conquering Responsive Layouts | Navigation Challenge

...

Jochem•17mo 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 NaeemOP•17mo ago

check now

Mannix•17mo ago

you have margin-top: 2rem; on your nav-item that is why it goes down

Jochem•17mo 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 NaeemOP•17mo ago

Thanks for your help, Mannix and Jochem, I am new on media queries.

Gaming

Programming

What does it mean and why to use?