There are no tracking or monitoring cookies on this site. There are only cookies used for documentation examples related to cookies.
Close

Processing...
This may take a few seconds.

if-has

Syntax

if-has: [scope(selector)] selector;

This conditional is a cross-DOM way of finding out if an element is a parent of a matching selector, and if found then the result passes the check.

 

scope = (Optional) the CSS selector element that you are running the check on, to see if it has a matching selector inside it. If this option is not specified, the element that will be checked will be the element that received the event.

selector = the selector element you are looking for.

 

It allows for checking elements elsewhere in the DOM, and in this regard it gives you a different tool alongside the upcoming CSS has selector. if-has is not limited to working directly on the element receiving the event. You can use it to check conditions somewhere else in the DOM, in a completely disrelated place to the sectiojn of HTML where the main event is taking place.

 

Note:

This is similar to the CSS pseudo-selector has(), but it is not quite the same. For one thing, you can only use if-has() at the end the main CSS selector string (eg. "div a:if-has(scope(main) p)"), like all the other ACSS conditionals.

You cannot currently use any ACSS conditionals in the middle of the CSS selector like a regular CSS pseudo-selector (eg. "div:not(.selected) a").

Also, if-has() is cross-DOM and not limited to the CSS selector it is applying to.

if-has