(Note: At the time of writing this article this feature is still a work in progress and does not necessarily reflect the final design or implementation.)

While Brave blocks 3rd party ads and other undesired content out of the box, you may still run into ads while browsing from time to time. Generally these ads are first party and it's easy to forget that Brave does not block 1st party ads by default as they tend to be safe/non-malicious. However, in the case of gmail, Facebook and many other popular websites, this may not be desirable.

Using the Filter

Brave allows for you to remove individual elements on the screen by way of a built-in "cosmetic CSS filter". To use the filter:

1. Right-click on an Element on the page
2. Select the  icon from the context menu —> Block Element via Selector 
   
   
3. Ensure the correct element is displayed in the input form and click "Ok" 

 Below is an example of the filter in action on the website reddit.com:

After selecting Block element via CSS selector the pop-up box displays a text box containing the element detected in the area you initially right-clicked. In this example, the content was .infobar, wrapped inside div.contents. The filter is designed to work on any page element, not just images.

Isolating Elements

In the next example, the filter is used to block the download button on the page. The page is then reloaded to show that these filters will remain in place until the Clear CSS rules for this site option is selected:

Notice that the element in the box is much longer this time. This is because the button element is  nested inside several containers. Each container is delimited by the chevron symbol (>):

1. .et_pb_fullwidth_header_1
2. .et_pb_fullwidth_header_container
3. .header-content-container
4. .header-content
5. .et_pb_button_one (this is the element we're actually blocking)

Nested Elements

Containers become relevant when trying to block an element that's been nested inside many other containers. The filter's detection will not always find the desired element name if there are too many layers surrounding it.

 Luckily, the built-in Developer Tools can do a lot of this work for you:

• Open Developer Tools and click the Inspector icon 
• Now when hovering over/clicking on a page element, the code window will highlight the block of code where the element is placed
• From here, find the starting tag for the container which holds the desired element
• If unclear, use the Properties tab in the Developer Tools window to confirm the name (top-most option)
  
  

Still have questions?

If you would like to request further assistance, get more information or this article didn't address your issue, please reach out to us on our Brave Community website.