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 |
| The CSS selector that an HTML element containing the specified descendants must match; defaults to the value of the | 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 |
| The string that the computed style of an HTML element matching | No |
| 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 |
| Optional parameter that can be used to disable the snippet if the window.innerWidth is smaller than the given value. | No |
| 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 |
---|---|
| Hides any |
| Hides any |
| Hides any |
| Hides any |
| Hides any |
Last updated