hide-if-has-and-matches-style

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 matches a given CSS selector and, optionally, if the element's computed style contains a given string.

Parameters

Name	Description	Mandatory
search	The CSS selector against which to match descendants.	Yes
selector	The CSS selector that an HTML element must match to be hidden.	Yes
`searchSelector`	CSS selector for elements containing the specified descendants. Defaults to `selector`.	No
style	The string the computed style of the matching element must contain.	No
`searchStyle`	The string the computed style of `searchSelector` must contain.	No
`waitUntil`	Delay until given state.	No
`windowWidthMin`	Disable if window.innerWidth is smaller than this value.	No
`windowWidthMax`	Disable if window.innerWidth is greater than this value.	No

Filter examples

Filter	Result
`hide-if-has-and-matches-style span.social-media-toolbar div`	Hides any `div` with a `span.social-media-toolbar` in its subtree.
`hide-if-has-and-matches-style span.social-media-toolbar div nav`	Hides any `div` with a `nav` in its subtree that has `span.social-media-toolbar`.
`hide-if-has-and-matches-style span.social-media-toolbar div nav 'color: blue'`	Hides the div with `color: blue`.