using * and box-sizing etc..
So I see KP do this
what is the difference between that and
22 Replies
In the first example, youre grabbing everything and their pseudo elements and setting box sizing; but not resetting margin and padding on pseudo elements.
Second example, you’re grabbing everything + their pseudo elements and passing those properties and values.
Basically the difference is whether the pseudo elements have default margin and padding or if it’s being reset.
I still don't understand, I thought the pseudo elements were going to get resized by select all and that would be it. Like, do I now want to add them to the select all pseudo as well or does that mess stuff up from my page?
I guess I understand that you just changing the box-sizing and I understand that, what I don't understand or did not know was that before and after elements have their special margins we did not know about?
Or does KP do it the first way because all he needs to do is change the type of styling to the pseudo elements
I’m not sure what you mean by the select all pseudo or how that would mess up your page.
Pseudo elements are not included in * selector. If you want to apply the same styles to them like box-sizing , you have to include them in the selector with:
*::before , *::after
They do not have special margins and padding but they do have default padding like everything else. If you want to reset that too , use the second example
Like I selected all pseudo elements with a
* etc.. I thought it was a select everything on the page including ::before
I see you said that now wouldn't everyone rather the second version?Nope, if you want to select all before elements you have to use the selector *::before
I certainly do but different designs need different things
I guess that was what was confusing me, now I need to learn how to properly use html selectors
There’s not as many as you think. The new ones are the selectors to know :is , :where, :has, and :not ! So exciting
It is very exciting I wish I stuck to it when I was into it now I am just making components for my site and I am going to redo my main website. I will be using sections. However, I really don't know how to talk about myself
I can talk about someone any day good or bad, but myself I don' t know how to describe it besides awesome lmao
I understand :has and :not but not so much :is or :where, I mean I guessing :where is conditional statement like in backend
As for the others > selects only direct children. + selects all elements that have an adjacent sibling of the same selector (li + li). Those are main ones. :nth-of-type is useful too
I don't get the + one yet either, I saw documents and videos like ? lol
:is and :where pretty much do the same thing, they’re both forgiving so if one selector is invalid it doesn’t throw out the whole thing. The main different is :where has 0 specificity
so i can use it when I want to affect a div like
div:where(p){}
get all the paragraphs and change the font family or something?If you have:
ul
li
li
li
li
/ul
li + li {…}
Will select any li with an li directly before it. So it selects all the lis except the first one in this example because it dies not have an li before, it has a ul
Okay I would not really know where to use that yet I will make it happen though 🙂
No, you would use :has in that example to get the paragraph inside the div
:is and :where are for selecting itself so if you had several divs but they had different class names, you could use div:where(.wrapper) so you only select the div that has a class of wrapper.
From there you could select the paragraph inside wrapper div:is(.wrapper) p{….}
why don' t I just use div.wrapper, I don't get the bennefit of that yet
Or you could select the paragraph inside wrapper like .wrapper :is(p)
okay I will be back must go for walk with wife : )
Because of specificity rules. You use them thoughtfully to override specificity or keep it at 0. Also they are forgiving so if you had a list,
Div, sectioin, main { background: lightpink;}
and you had a typo in section, the rule would be thrown out. Nothing would get a bg.
However if you used :is(div, sectioin, main)
{ background: lightpink;}
It will apply bg to div and main still and just skip over the selector with the typo but still honor the selectors that ARE valid.
Ohhhhh I get it, wow that was literally the best description I heard in a while. I didn't realize that like that pretty awesome 🙂
This forgiving rule is also applied to the :where selector. The difference bw :where and :is is that :where has 0 specificity you can override it with any selector. Even if you had
<p id=“par”>Text</p>
And used :where(#par){color:red;},
That could be overridden with
p{color: blue;}
Which is crazy that an element selector could override an id selector but it’s possible with :where !!!
The + is helpful to set spacing , so you could select all lis that have an li before it and give it a margin top of 1em or whatever . So you want to space them out but not give extra spacing on top of the first li . Especially if you’re working with non-collapsing margins.
Hard to explain selectors by typing but seeing videos of it in action it makes sense.
okay so you saying with the + selecting the li's like
div> li + li would get every li but the top one and would use it in this scenerio so you would not put a margin top on the first one because it don't need it but the others do, that makes a littl more sense now 😉 thank you very much @hart❤🔥 you break things down barney style that helps out a lot. Like I would love to see all this stuff in action in a huge web site, the have a lot of stuff like --google-button or some thing like that LOL