anyone knows what is the * + * selector?

anyone knows what is the * + * selector?
27 Replies
Kevin Powell
Kevin Powell3y ago
adjacent sibling combinator 🙂 h1 + p would select any paragraph that is right after an h1 (or, if the paragraph is adjacent to an h1, select it)
Aozen
AozenOP3y ago
but what is an adjacent to a * like this it says all adjacent to all i found this in one of your videos
Aozen
AozenOP3y ago
Jochem
Jochem3y ago
I think that's any direct child of a .flex with multiple children, ignoring the first child
Aozen
AozenOP3y ago
but how does that logically link to the combinator
Jochem
Jochem3y ago
.flex > means "any direct child of .flex". * means any element, + means it needs an adjacent sibling, so * + * means any element (represented by the last star) with any element as a directly preceding sibling (represented by the first star)
Aozen
AozenOP3y ago
did not fully understand that xd sry
Jochem
Jochem3y ago
you understand what Kevin explained, that bit about h1 + p? @aozen_dreyar
Aozen
AozenOP3y ago
yes
Jochem
Jochem3y ago
when you change the p to *, the selector changes to h1 + *. Do you understand what that means?
Aozen
AozenOP3y ago
so everything after h1 ? select all elements after h1 is that what it says?
Jochem
Jochem3y ago
it's the same as with the h1 + p, except the p can be anything
<div class="flex">
<h1>Hi</h1>
<p>I am selected by h1 + p, or h1 + *</p>
<p>I am not selected by h1 + p or h1 + * because there is no h1 right before me</p>
</div>
<div class="flex">
<h1>Hi</h1>
<p>I am selected by h1 + p, or h1 + *</p>
<p>I am not selected by h1 + p or h1 + * because there is no h1 right before me</p>
</div>
Aozen
AozenOP3y ago
so first adjacent wild card element to h1?
Jochem
Jochem3y ago
yes
Aozen
AozenOP3y ago
so here if i say .flex > * + * it will do it goes to h1 and finishes the > * then it skips that to the first adjacent element next to it i could be a bit lost here i know it should target all elements after the first element ( but not sure how )
Jochem
Jochem3y ago
here's a codepen demonstrating what's happening https://codepen.io/jochemm/pen/bGKMqNp
Jochem
CodePen
bGKMqNp
...
Jochem
Jochem3y ago
you can see that .flex>h1+p selects only the first paragraph when you comment that out, and uncomment the .flex>*+* you'll see that both p's get a border
Aozen
AozenOP3y ago
i saw but still can't wrap my head around it ( the * means all or * means wild card and here it behaves a bit weirdly)
Jochem
Jochem3y ago
that's because it selects the second * only if it has a sibling before itself that can match the first * in the selector, it's always "any element"
Aozen
AozenOP3y ago
so the first part targets any element that is a direct decendent of .flex then we use a combinator to target any element adjacent to that element
Aozen
AozenOP3y ago
and any element means wild card and all at same time right?
Jochem
Jochem3y ago
yes "all" doesn't really make that much sense in the context of a css selector like... "p" matches "all" instances of the p tag, just like "*" matches all instances of any element, if that's what you mean by "all"
Aozen
AozenOP3y ago
yes thank you ❤️
Jochem
Jochem3y ago
glad to help 🙂
Aozen
AozenOP3y ago
may i ask something also in css but a bit general? its also an explanation about specificity ( not sure if i should make a new post)
Jochem
Jochem3y ago
new posts is usually better if it's unrelated, better chance more people will see it 🙂
Aozen
AozenOP3y ago
👍
Want results from more Discord servers?
Add your server