hide-if-has-and-matches-stylesnippet 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.
The CSS selector against which to match the descendants of HTML elements.
The CSS selector that an HTML element must match for it to be hidden.
The CSS selector that an HTML element containing the specified descendants must match; defaults to the value of the
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.
The string that the computed style of an HTML element matching
The following table lists examples that use the