This article is about creating custom rules to hide elements such as pop-ups, banners, and images on websites through 1Blocker's Hide Elements custom category.
1Blocker provides two different ways of hiding elements on web pages:
Automatically generated rules via the visual editor.
Manually created rules in Custom Rules > Hide Elements.
The "Hide elements" filter requires basic knowledge of how browsers load images and other elements on web pages. This is why we recommend using the Visual Editor to hide annoying elements unless you are familiar with HTML and CSS.
The Visual Editor is explained here: Visual editor tutorial.
So, if you are no stranger to CSS selectors or want to try writing them, the following tutorial is for you.
And here’s how to create a custom "Hide Elements" rule:
Open 1Blocker app.
Go to Custom Rules > Hide Elements.
Press the New Rule button.
Pick a name for your future rule (optional).
Specify a CSS selector to target the element you want to hide.
Choose whether to hide that element on all domains or specific ones.
How to write CSS selectors
1Blocker lets you hide specific elements on a web page by targeting them with CSS selectors, as they can select HTML elements based on their properties: tag, class, id, attribute, etc.
All selectors supported by Safari are valid for 1Blocker as well.
Here are a few examples of basic CSS selectors:
tag
To block all elements that share the same <tag>, put the tag's name solely in the rule. Let’s say we want to block ADS and MORE_ADS elements here:
<div>ADS</div>
<div>MORE_ADS</div>
The selector that blocks them: div
.class
Lots of ad-containing elements belong to some classes, like here:
<div class="some-name">
ADS
</div>
The selector that blocks ADS: .some-name
#id
If a block of code contains an id=”some-name” attribute, you can target it using an #id selector:
<div id="some-name">
ADS
</div>
The selector that blocks ADS: #some-name
[attribute]
Any other attributes can be matched by putting them into the [square brackets].
You can put either the attribute name alone: [attribute] or the attribute name and its property: [attribute=value].
The true power of CSS selectors lies in their flexibility. Usually, web elements combine several attributes, class names, or other elements included in larger CSS structures.
The good thing is that many complex combinations can be described using CSS selectors.
We will cover a just couple of basic cases in this article, and if you want to dive deeper, you can find a comprehensive list of CSS selectors here: CSS Selector Reference
If an element contains several attributes, classes, or ids, we just need to put the corresponding selectors together one by one to match such an element.
<div class="name1 name2" id="name3">
ADS
</div>
The following selector will target the ADS element and all other elements that share the same combination of classes and ids: .name1.name2#name3
Another case is when we have an element containing other elements with their own classes and attributes. The descendant elements can be selected if we put them together and separate each element with a space:
<div class="top">
<div class="descendant">
ADS
</div>
</div>
Here is a selector that we can use to match the element inside the descendant class: .top .descendant
It will be applied to all elements that have a class of 'descendant' and are inside an element with the 'top' class.