Kevin Powell - Community•3mo ago

`:has(::after)`

Can you use :has with a psuedo element inside of it? It's not working for me but I don't see why it wouldn't but I can't really find anything For context, I'm trying to style a tooltip based on whether the label has a required asterisk:

label:has(::after) button[title]:hover::after {
  transform: translate(10%, -50%);
}

label:not(:has(::after)) button[title]:hover::after {
  transform: translate(5%, -50%);
}

label:has(::after) button[title]:hover::after {
  transform: translate(10%, -50%);
}

label:not(:has(::after)) button[title]:hover::after {
  transform: translate(5%, -50%);
}

5 Replies

ἔρως•3mo ago

Kevin Powell•3mo ago

Be nice if it could detect pseudo-elements, but not how it works. What's the CSS that's adding the asteriks? If it's coming from CSS, you can target that rule.

vinceOP•3mo ago

Yea I realized that after posting this - if it has a .required class or something similar I can just target that like you pointed out 😄

Kevin Powell•3mo ago

best way to do it, imo, is use an attribute selector 😄 If you have <input type="email" required>, you can select it with [required] or input[required] and add the pseudo that way 🙂

ἔρως•3mo ago

this has an advantage: it prevents the form from submitting if it isn't filled, due to the built-in form validation

Gaming

Programming

`:has(::after)`

Did you find this page helpful?