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
argbet
argbet3y ago
I want the behaviour to be the same as this:
argbet
argbet3y ago
argbet
argbet3y ago
argbet
argbet3y 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
Mannix3y 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
argbet
argbet3y ago
Hi @mannix_, I tried your suggestion, it didn't seem to work
argbet
argbet3y ago
The labels are still visible:
Mannix
Mannix3y ago
is your browser supporting has selector? it is working in chrome
MarkBoots
MarkBoots3y ago
was just about to ask
argbet
argbet3y ago
Oh okay, it works now Thanks! I'll watch the vid where Kevin explains this too
Mannix
Mannix3y ago
thumbup
argbet
argbet3y 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 {}
argbet
argbet3y ago
Just trying to disect how it works internally
MarkBoots
MarkBoots3y ago
you can look at it that way yes. the first part selects the parent (with that "query") and then grabs the child
argbet
argbet3y ago
Ah okay, that makes sense Thanks again!
Want results from more Discord servers?
Add your server