Learn CSS Grid by Building a Magazine - Step 26

HTML-CSS
1

Tell us what’s happening:

I was just wondering why we need the “::before” and “::after” pseudo-selectors when “*” selects all the elements?

Your code so far

<!-- file: index.html -->


/* file: styles.css */
/* User Editable Region */

*, ::before,  ::after{
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

/* User Editable Region */

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/129.0.0.0 Safari/537.36

Challenge Information:

Learn CSS Grid by Building a Magazine - Step 26

2

the * selector will not select elements that before and after create. This is why they are needed. (funny but I just answered this question a day or two ago. You may consider searching the forum to see if this will save you time in getting answers)

3

Thank you for responding.

What do you mean by selecting elements before and after create? I’m just trying to understand since it selects everything so what is before and after everything?

4

I actually said:

That is, the ::before and ::after are creating elements that cannot be reached by selecting with the * alone.