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)

AozenOP•2y ago

but what is an adjacent to a * like this it says all adjacent to all i found this in one of your videos

AozenOP•2y ago

Jochem•2y ago

I think that's any direct child of a .flex with multiple children, ignoring the first child

AozenOP•2y ago

but how does that logically link to the combinator

Jochem•2y 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)

AozenOP•2y ago

did not fully understand that xd sry

Jochem•2y ago

you understand what Kevin explained, that bit about h1 + p? @aozen_dreyar

AozenOP•2y ago

yes

Jochem•2y ago

when you change the p to *, the selector changes to h1 + *. Do you understand what that means?

AozenOP•2y ago

so everything after h1 ? select all elements after h1 is that what it says?

Jochem•2y 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>

AozenOP•2y ago

so first adjacent wild card element to h1?

Jochem•2y ago

yes

AozenOP•2y 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•2y ago

here's a codepen demonstrating what's happening https://codepen.io/jochemm/pen/bGKMqNp

Jochem

CodePen

bGKMqNp

...

Jochem•2y 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

AozenOP•2y 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•2y 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"

AozenOP•2y 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

AozenOP•2y ago

and any element means wild card and all at same time right?

Jochem•2y 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"

AozenOP•2y ago

yes thank you ❤️

Jochem•2y ago

glad to help 🙂

AozenOP•2y 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•2y ago

new posts is usually better if it's unrelated, better chance more people will see it 🙂

AozenOP•2y ago

👍

Gaming

Programming

anyone knows what is the * + * selector?