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
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.
​

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

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.

hide-if-graph-matches

hide-if-labelled-by

Last modified 3mo ago