How does :has() work in CSS?
23 January 2024 (Updated 23 January 2024)
On this page
In a nutshell
The :has() pseudo selector lets you select an element containing specific content.
Examples:
| Selector | Explanation |
p:has(img) | Select all <p> elements that have an <img> descendant. |
p:has(b) | Select all <p> elements that have a <b> descendant. |
p:has(>b) | Select all <p> elements that have a <b> child as a direct descendant. |
p:has(+ ul) | Select all <p> elements that have a <ul> as their next adjacent sibling. |
article:has(h2, h3, h4) | Select all <article> elements that have either a h2, h3, or a h4 descendant. |
Links
Tagged:
CSS
Thanks for your comment 🙏. Once it's approved, it will appear here.
Leave a comment