LogoLogo
About GitLabAcceptable Ads
  • Getting Started
  • Browser Ad-Filtering Solution
    • Features
    • Getting Started
      • Quickstart
      • Integrate the Solution
      • Set up user counting
    • Guides
      • User counting
      • Configure Solution settings
      • Run separate instances of the filtering engine
      • Update the Solution
      • Understand the snippets library
      • Create a filter list
      • Testing
    • Advanced
      • Services and classes
      • Sitekey
      • ADRs
      • Frame hierarchy
  • Snippets
    • Snippets Overview
    • Behavioral Snippets
      • abort-current-inline-script
      • abort-on-property-read
      • abort-on-property-write
      • abort-on-iframe-property-read
      • abort-on-iframe-property-write
      • array-override
      • cookie-remover
      • freeze-element
      • json-override
      • json-prune
      • override-property-read
      • prevent-listener
      • replace-fetch-response
      • replace-xhr-response
      • simulate-mouse-event
      • skip-video
      • strip-fetch-query-parameter
    • Conditional Hiding Snippets
      • hide-if-canvas-contains
      • hide-if-contains
      • hide-if-contains-image
      • hide-if-contains-similar-text
      • hide-if-contains-visible-text
      • hide-if-contains-and-matches-style
      • hide-if-has-and-matches-style
      • hide-if-labelled-by
      • hide-if-matches-computed-xpath
      • hide-if-matches-xpath
      • hide-if-matches-xpath3
      • hide-if-shadow-contains
    • Debugging Snippets
      • debug
      • log
      • profile
      • trace
    • Performance Snippets
      • race
    • Snippets Support by Platform
    • Node Highlighting
    • Accessing shadow DOM elements
  • Working with filters
  • DATA AND PRIVACY
    • Data collection at eyeo
Powered by GitBook
On this page
  • Parameters
  • Filter examples

Was this helpful?

Edit on GitLab
Export as PDF
  1. Snippets
  2. Conditional Hiding Snippets

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

waitUntil

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

windowWidthMin

Optional parameter that can be used to disable the snippet if the window.innerWidth is smaller than the given value.

No

windowWidthMax

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-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 updated 1 year ago

Was this helpful?