(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 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.

Managing Filters

Any blocked elements made using the CSS selector will be recorded and displayed on the brave://adblock page. You can reach this page by:

• Typing in brave://adblock into the address bar (hit enter)
• In the browser, click Main Menu --> Brave Adblock
• Clicking Manage custom filters in the context menu under the Block element via selector option.

On the Brave://adblock page, you will see a Custom Filters section at the bottom of the page where the blocked elements will be displayed. Below is the element I blocked above on reddit.com:

To remove filters from the list (that is, to "unblock" a particular element(s)), simply delete the rule from the Custom Filters list and relaunch the browser.

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 rule set for blocking this element is removed from the custom filters list in brave://adblock:

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. :nth-child(1)
2. :nth-child(6)
3. .nav-item__link (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)