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•10mo 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•10mo ago

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

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

got it thanks

Hamza Naeem•10mo 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 Naeem•10mo ago

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

Hamza Naeem

CodePen

Conquering Responsive Layouts | Navigation Challenge

...

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

check now

Mannix•10mo ago

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

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

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

Gaming

Programming

What does it mean and why to use?