hide-if-contains-and-matches-style

The hide-if-contains-and-matches-style snippet hides any HTML element (or its ancestors) that matches a CSS selector if the element's text content contains a given string and, optionally, if the element's computed style contains a given string.
You can use this snippet to hide an element based on text content and style.
Parameters
Name
Description
Mandatory
search
The string to look for in HTML elements. If the string begins and ends with a slash (/), the text in between is treated as a regular expression.
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 given string 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-contains-and-matches-style snippet:
Filter
Result
hide-if-contains-and-matches-style FAQ nav
Hides any nav element whose text content contains the word FAQ. The word FAQ doesn't need to be found inside the direct children of the nav element; it can be anywhere in its subtree.
hide-if-contains-and-matches-style FAQ nav a
Hides any nav element that has an a element inside its subtree whose text content contains the word FAQ.
hide-if-contains-and-matches-style /.*/ li.serp-item 'li.serp-item div.label'
Hides any li.serp-item element which has an 'li.serp-item div.label' element inside its subtree whose text content matches the /.*/ regex.
hide-if-contains-and-matches-style FAQ nav a 'color: blue'
Hides any nav element that has the color property set to blue and has an a element inside its subtree whose text content contains the word FAQ.
hide-if-contains-and-matches-style FAQ nav a 'color: blue' 'display: inline'
Hides any nav element which has the color property set to blue and has an a element inside its subtree whose text content contains the word FAQ and whose display is set to inline.
hide-if-contains-and-matches-style FAQ nav a /.?/ 'display: inline'
Hides any nav element whose style matches the /.?/ regex and has an a element inside its subtree whose text content contains the word FAQ and whose display is set to inline. The /.?/ regex will match anything, including empty strings.
​

Name	Description	Mandatory
search	The string to look for in HTML elements. If the string begins and ends with a slash (/), the text in between is treated as a regular expression.	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 given string 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-contains-and-matches-style FAQ nav`	Hides any `nav` element whose text content contains the word `FAQ`. The word FAQ doesn't need to be found inside the direct children of the `nav` element; it can be anywhere in its subtree.
`hide-if-contains-and-matches-style FAQ nav a`	Hides any `nav` element that has an a element inside its subtree whose text content contains the word `FAQ`.
`hide-if-contains-and-matches-style /.*/ li.serp-item 'li.serp-item div.label'`	Hides any `li.serp-item` element which has an `'li.serp-item div.label'` element inside its subtree whose text content matches the `/.*/` regex.
`hide-if-contains-and-matches-style FAQ nav a 'color: blue'`	Hides any `nav` element that has the `color` property set to `blue` and has an a element inside its subtree whose text content contains the word `FAQ`.
`hide-if-contains-and-matches-style FAQ nav a 'color: blue' 'display: inline'`	Hides any `nav` element which has the `color` property set to `blue` and has an a element inside its subtree whose text content contains the word `FAQ` and whose display is set to `inline`.
`hide-if-contains-and-matches-style FAQ nav a /.?/ 'display: inline'`	Hides any `nav` element whose style matches the `/.?/` regex and has an a element inside its subtree whose text content contains the word `FAQ` and whose display is set to `inline`. The `/.?/` regex will match anything, including empty strings.

hide-if-contains-visible-text

hide-if-graph-matches

Last modified 3mo ago