Cosmetic Filters allow you to completely remove unwanted content from a page. They are applied before the page is processed by WebSite-Watcher. The result can be a much smaller page that contains only the content you want to monitor.


This feature can also be used to remove floating elements that hide other content, for example cookie banners or login panels.

Include and Remove Filters

To modify page content, you must create Include filters and Remove filters.


  • Remove filters remove all matched elements.
  • Include filters keep only the matched elements and remove everything else.


These filters are based on the CSS definitions used on the page. WebSite-Watcher provides a simple 3-step assistant to simplify the creation process:


  1. Select text
    Search for and click an item for which you want to create a filter. WebSite-Watcher identifies the related CSS definitions.

  2. Select CSS definition
    Select and test the detected CSS definitions. The selected definition should include the complete content that you want to remove or include.

  3. Create the filter
    Choose whether to create a Remove filter or an Include filter. Test the filter carefully, then click "Add filter" to create it.


This feature removes content from the page. Always test the selected CSS filters carefully to ensure that no important content is removed.

2-Step Execution

Cosmetic Filters are executed in two steps:


1.  WebSite-Watcher executes all Include filters.

2.  WebSite-Watcher executes all Remove filters.


This allows you to define the parts of the page that you want to monitor and then remove unwanted content from those parts.

Syntax of Cosmetic Filters

Remove filters can be entered directly. Include filters must be placed in parentheses.


There are three main types of rules:


  • #name
    Matches all elements with id="name".
    Example: #header-menu
    Matches: <div id="header-menu">...</div>

  • .name
    Matches all elements with class="name".
    Example: .top-bar
    Matches: <div class="top-bar">...</div>

  • .name*
    Matches all elements with a class attribute that contains "name", for example class="name name2". Please note that you can use either the asterisk (*) or the question mark (?), but not both together.
    Example: .dropdown*
    Matches: <div class="left dropdown">...</div>

  • #abc?xyz
    .abc?xyz
    In class attributes and ID attributes, the question mark (?) can be used as a wildcard. Please note that you can use either the asterisk (*) or the question mark (?), but not both together.
    Example: .menu?t
    Matches: <div class="menuleft">...</div> and <div class="menuright">...</div>


Any line that starts with an exclamation mark is treated as a comment.

Examples

Example of Remove Filters:


#left-menu
!this is a comment, the next filter will remove the cookie banner
.consentbanner
.menu?t



Example of Include Filters:


(#breaking-news)
(.top-stories)


See also: