anyone knows what is the * + * selector?
anyone knows what is the * + * selector?
27 Replies
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)but what is an adjacent to a *
like this it says all adjacent to all
i found this in one of your videos
I think that's any direct child of a
.flex with multiple children, ignoring the first childbut how does that logically link to the combinator
.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)did not fully understand that xd
sry
you understand what Kevin explained, that bit about
h1 + p? @aozen_dreyaryes
when you change the
p to *, the selector changes to h1 + *. Do you understand what that means?so everything after h1 ?
select all elements after h1
is that what it says?
it's the same as with the
h1 + p, except the p can be anything
so first adjacent wild card element to h1?
yes
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 )
here's a codepen demonstrating what's happening https://codepen.io/jochemm/pen/bGKMqNp
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 borderi saw but still can't wrap my head around it ( the * means all or * means wild card and here it behaves a bit weirdly)
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"
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
and any element means wild card and all at same time
right?
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"
yes
thank you ❤️
glad to help 🙂
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)
new posts is usually better if it's unrelated, better chance more people will see it 🙂
👍