:has()
Quick Summary for :has
The :has() CSS pseudo-class represents an element if any of the selectors passed as parameters (relative to the :scope of the given element) match at least one element.
Code Usage for :has
/* Selects any <a>, as long as it has an <img> element directly inside it  */ /* Note that this is not supported in any browser yet */ let test = document.querySelector('a:has(> img)'); 
More Details for :has

:has()

The :has() CSS pseudo-class represents an element if any of the selectors passed as parameters (relative to the :scope of the given element) match at least one element.

/* Selects any <a>, as long as it has an <img> element directly inside it  */ /* Note that this is not supported in any browser yet */ let test = document.querySelector('a:has(> img)'); 

Syntax

:has( <relative-selector-list> )

where <relative-selector-list> = <relative-selector>#

where <relative-selector> = <combinator>? <complex-selector>

where <combinator> = '>' | '+' | '~' | [ '||' ]<complex-selector> = <compound-selector> [ <combinator>? <compound-selector> ]*

where <compound-selector> = [ <type-selector>? <subclass-selector>* [ <pseudo-element-selector> <pseudo-class-selector>* ]* ]!

where <type-selector> = <wq-name> | <ns-prefix>? '*'<subclass-selector> = <id-selector> | <class-selector> | <attribute-selector> | <pseudo-class-selector><pseudo-element-selector> = ':' <pseudo-class-selector><pseudo-class-selector> = ':' <ident-token> | ':' <function-token> <any-value> ')'

where <wq-name> = <ns-prefix>? <ident-token><ns-prefix> = [ <ident-token> | '*' ]? | <id-selector> = <hash-token><class-selector> = '.' <ident-token><attribute-selector> = '[' <wq-name> ']' | '[' <wq-name> <attr-matcher> [ <string-token> | <ident-token> ] <attr-modifier>? ']'

where <attr-matcher> = [ '~' | | | '^' | '$' | '*' ]? '='<attr-modifier> = i | s

Description

The :has() pseudo-class takes a relative selector list as an argument. In earlier revisions of the CSS Selectors Level 4 specification, :has had a limitation that it couldn't be used within stylesheets. Instead, it could only be used with functions like document.querySelector(); this was due to performance concerns. This limitation has been removed because no browser implemented it that way. Instead, browsers currently only support the use of :has() within stylesheets.

Examples

Matching <a> elements that directly contain an <img>

The following selector matches only <a> elements that directly contain an <img> child:

a:has(> img) 

Matching <h1> elements that are followed by a <p>

The following selector matches <h1> elements only if they have a <p> element directly following them:

h1:has(+ p) 

Specifications

Specification
Selectors Level 4 # relational

See also

Locating DOM elements using selectors :scope

Last modified: Jan 24, 2022, by MDN contributors

Select your preferred language English (US)EspañolFrançais日本語Русский中文 (简体) Change language

No Items Found.

Add Comment
Type in a Nick Name here
 
Other Categories in CSS
css
Search CSS
Search CSS by entering your search text above.
Welcome

This is my test area for webdev. I keep a collection of code here, mostly for my reference. Also if i find a good link, i usually add it here and then forget about it. more...

Subscribe to weekly updates about things i have added to the site or thought interesting during the last week.

You could also follow me on twitter or not... does anyone even use twitter anymore?

If you found something useful or like my work, you can buy me a coffee here. Mmm Coffee. ☕

❤️👩‍💻🎮

🪦 2000 - 16 Oct 2022 - Boots
Random Quote
Ever tried. Ever failed. No matter. Try again. Fail again. Fail better. You won't believe what you can accomplish by attempting the impossible with the courage to repeatedly fail better.
Unknown
Random CSS Property

tab-size

The tab-size CSS property is used to customize the width of tab characters (U+0009).
tab-size css reference