Previous Sibling Selector

Hi, I'm trying to get my previous sibling using :has(), however, it does not seem to work. Here is my JSFiddle: https://jsfiddle.net/7pf496wL/7/
16 Replies
rezabet
rezabet2y ago
I want the behaviour to be the same as this:
rezabet
rezabet2y ago
rezabet
rezabet2y ago
rezabet
rezabet2y ago
The problem is, this functionality works on the e-mail input where the label is after, but I want the same functionality to work on the name input as well where the label is before it
Mannix
Mannix2y ago
.form__group:has(.form__input:placeholder-shown) .form__label
.form__group:has(.form__input:placeholder-shown) .form__label
this works on both basically you check if form group has input with placeholder shown and then you go back inside the form group to style the label. Kevin's latest video explains this really well
rezabet
rezabet2y ago
Hi @mannix_, I tried your suggestion, it didn't seem to work
rezabet
rezabet2y ago
The labels are still visible:
Mannix
Mannix2y ago
is your browser supporting has selector? it is working in chrome
MarkBoots
MarkBoots2y ago
was just about to ask
rezabet
rezabet2y ago
Oh okay, it works now Thanks! I'll watch the vid where Kevin explains this too
Mannix
Mannix2y ago
thumbup
rezabet
rezabet2y ago
Btw, did I get this right? @mannix_ @MarkBoots So the first highlighted one gets executed first. It asks, "Does the class with form__group has a child class called form__input *with * its placeholder shown? If yes --> select all elements with a class called form__label and style them within {}
rezabet
rezabet2y ago
Just trying to disect how it works internally
MarkBoots
MarkBoots2y ago
you can look at it that way yes. the first part selects the parent (with that "query") and then grabs the child
rezabet
rezabet2y ago
Ah okay, that makes sense Thanks again!