This article is all about creating custom rules to hide elements such as pop-ups, banners, and images on websites.
1Blocker provides two different ways of hiding elements on web pages:
automatically generated rules via the visual editor;
manually created rules in Rules > Custom > Hide Elements.
The "Hide elements" category requires basic knowledge of how browsers render web pages or, in other words, of HTML/CSS. This is why we recommend using the visual editor to hide disturbing elements unless you are familiar with these technologies. The Visual Editor is explained here: Hiding elements using Visual Editor
So, if you are no stranger to CSS selectors or if you want to try your hand at writing them, the following tutorial is for you.
And here’s how to create a custom "Hide Elements" rule:
Open 1Blocker app;
Go to Rules > Custom > Hide elements;
Hit the "New Rule" button;
Fill in the Name (Optional), CSS selector and choose whether you want to hide the element on all domains or a specific one.
How to write CSS selectors?
1Blocker allows you to hide specific elements within a page by targeting them using CSS selectors, as they can select HTML elements according to their properties: tag, class, id, attribute, etc.
All selectors supported by Safari are valid for 1Blocker as well.
Here are the simplest ones:
tag
To block all elements that share the same <tag>, put the name of the tag 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 greatest thing about CSS selectors
Usually, elements combine several attributes or class names, they also may contain other elements with different attributes, and so on. The good thing is that lots of such cases 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 the full list of the available CSS selectors here: CSS Selector Reference
The more precise a selector is the better the rule will target the desired element.
If the same element contains several attributes, classes, or ids, we just need to put the corresponding selectors together in order to match such an element.
<div class="name1 name2" id="name3">ADS</div>
The following selector will target 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 that contains 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"> … </div> </div>
Here is a selector which we can use in order to match the descendant element: .top .descendant
It will apply to all elements that have a class of 'descendant' and are inside an element with the 'top' class.