Recommended Free Tools
CSS :has() selects an element based on a related element that matches a selector inside its parentheses. That lets you style a parent or ancestor when it contains a particular descendant, or select an element based on a following sibling—without adding a class or writing JavaScript for purely presentational rules.
What does the CSS :has() selector do?
:has() is a relational pseudo-class: its argument is evaluated relative to the element being selected. In practical terms, .card:has(.featured) matches a card if a descendant inside it matches .featured. The CSS Selectors Level 4 specification defines the argument as a relative selector list. MDN’s reference describes the same matching behavior, and the W3C Selectors Level 4 specification defines the formal syntax.
Although people often call this “selecting a parent,” it is more precise to say that :has() selects an element based on a relationship. That element might be a direct parent, a more distant ancestor, or an element whose following sibling meets a condition.
How do you write :has()?
:has(<relative-selector-list>) {
/* declarations */
}The argument is a comma-separated list of relative selectors. The leading combinator, when present, describes the relationship from the element being tested: a space for a descendant, > for a direct child, + for the next sibling, or ~ for a later sibling. If several selectors are listed, a match for any one of them is enough.
The Tool Desk
Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
CSS :has() examples
Style a card that contains a featured item
/* Matches a card with a .featured descendant anywhere inside it. */
.card:has(.featured) {
border-color: rebeccapurple;
}The space-free selector inside the parentheses still matches descendants: it does not require .featured to be a direct child.
Require a direct-child image
article:has(> img) {
padding-top: 0;
}The > combinator restricts the match to an img that is a direct child of the article. An image nested inside another element does not satisfy this selector.
Match a heading followed immediately by a paragraph
h2:has(+ p) {
margin-bottom: 0;
}Here + tests the immediately following sibling. This is useful for adjusting a heading’s presentation according to the element that comes after it.
Highlight a form with an invalid control
form:has(:invalid) {
border: 2px solid crimson;
}This matches a form when a descendant matches :invalid. It can provide a visual cue, but it does not replace accessible error messages or form validation behavior.
Rank #3
- Brand: Wiley
- Set of 2 Volumes
- A handy two-book set that uniquely combines related technologies Highly visual format and accessible language makes these books highly effective learning tools Perfect for beginning web designers and front-end developers
Match the list item immediately before the last item
li:has(+ li:last-child) {
margin-bottom: 0;
}The selected li is the one whose immediately following sibling is the last list item. This demonstrates how :has() can express a previous-sibling condition that a selector without a relational test cannot directly express.
How does :has() affect specificity?
The specificity of :has() is the specificity of its most specific selector argument. The pseudo-class itself does not add a separate specificity value. A selector with a high-specificity argument can therefore make the full rule harder to override; keep arguments as narrow as the intended relationship requires and check the complete selector when debugging the cascade.
What are the restrictions on :has()?
:has()cannot be nested inside another:has().- Pseudo-elements are not valid in its argument, and pseudo-elements cannot serve as anchors for
:has().
These constraints limit which relationships can be expressed, so a class or application-driven state may be a better fit when the desired condition depends on logic outside the selector.
Is :has() supported in all browsers?
Support is broad in modern browsers, but legacy browser versions remain a consideration. MDN marks :has() as Baseline 2023 and lists support beginning with Chrome 105 (released September 2, 2022), Edge 105 (September 1, 2022), and Firefox 121 (December 19, 2023). Current compatibility data from Can I Use lists iOS Safari 15.4 and later as supported, with earlier iOS Safari versions unsupported. Check the versions your audience must use before relying on the selector for essential styling.
PC Slower Than It Used to Be?
A free scan shows the junk files, broken settings and background clutter dragging Windows down - then fixes them in one click.Free scan · Windows 10 & 11Outdated Drivers Are Slowing You Down
One free scan finds every outdated or missing driver and matches the right update for your exact hardware.Free scan · exact hardware matchBest Value
Plan a fallback for older browsers
In a browser that does not support :has(), an ordinary selector rule containing it can fail to parse. MDN notes that a forgiving selector list such as :is() or :where() can preserve parsing of supported alternatives. That does not make an unsupported :has() condition work; it only helps ensure a supported alternative in the list is not discarded along with it.
For styling that must remain available, define a class-based baseline and treat the relational rule as an enhancement. If the condition depends on application state rather than document relationships alone, update that class through the application or JavaScript.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.When should you use :has() instead of a class or JavaScript?
| Approach | Best fit | Trade-off |
|---|---|---|
:has() |
Presentational styling that depends on a relationship in the document, such as a container having a particular descendant. | Requires browser support for the selector; specificity follows its most specific argument. |
| Class | A clear, explicit state or a fallback baseline that must work in older browsers. | The class must be added and kept in sync with the relevant content or state. |
| JavaScript | Behavior or state that cannot be determined from the DOM relationship alone. | Adds script logic and maintenance where a CSS relationship rule may be sufficient. |
Use :has() when the condition is a relationship already represented in the DOM and the result is styling. Prefer an explicit class when it makes state clearer, when older-browser support is required, or when the condition is controlled by application logic. JavaScript is appropriate when the requirement is behavior rather than presentation.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
