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.
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 |
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. |
Last modified 3mo ago