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