hide-if-has-and-matches-style

The hide-if-has-and-matches-style snippet hides any HTML element (or its ancestors) that matches a CSS selector if a descendant of the element matches a given CSS selector and, optionally, if the element's computed style contains a given string.

This snippet has multiple uses, including the following:

• Hiding an optional element given its style

• Hiding an element's ancestor, optionally, giving its style

Ancestor hiding proves useful due to the lack of a CSS parent selector in browsers.

Parameters

Name	Description	Mandatory
search	The CSS selector against which to match the descendants of HTML elements.	Yes
selector	The CSS selector that an HTML element must match for it to be hidden.	Yes
searchSelector	The CSS selector that an HTML element containing the specified descendants must match; defaults to the value of the selector argument.	No
style	The string that the computed style of an HTML element matching selector must contain. If the string begins and ends with a slash (/), the text in between is treated as a regular expression.	No
searchStyle	The string that the computed style of an HTML element matching searchSelector must contain. If the string begins and ends with a slash (/), the text in between is treated as a regular expression.	No
waitUntil	Optional parameter that can be used to delay the running of the snippet until the given state is reached. Accepts: loading, interactive, complete, load or any event name.	No
windowWidthMin	Optional parameter that can be used to disable the snippet if the window.innerWidth is smaller than the given value.	No
windowWidthMax	Optional parameter that can be used to disable the snippet if the window.innerWidth is greater than the given value.	No

Filter examples

The following table lists examples that use the hide-if-has-and-matches-style snippet:

Filter	Result
hide-if-has-and-matches-style span.social-media-toolbar div	Hides any div element that has a span.social-media-toolbar element in its subtree.
hide-if-has-and-matches-style span.social-media-toolbar div nav	Hides any div element that has a nav element in its subtree with a span.social-media-toolbar in its subtree.
hide-if-has-and-matches-style span.social-media-toolbar div nav 'color: blue'	Hides any div element that has the color property set to blue and has a nav element in its subtree with a span.social-media-toolbar in its subtree.
hide-if-has-and-matches-style span.social-media-toolbar div nav 'color: blue' 'display: inline'	Hides any div element that has the color property set to blue and has a nav element in its subtree that has its display property set to inline and a span.social-media-toolbar in its subtree.
hide-if-has-and-matches-style span.social-media-toolbar div nav /.?/ 'display: inline'	Hides any div element whose style matches the /.?/ regex and has a nav element in its subtree and has its display property set to inline and has a span.social-media-toolbar in its subtree. The /.?/ regular expression will match anything, including empty strings.