How to cut out advertisements from web pages which use random names for id and classes

This article for those who use AdBlock Plus or uBlock Origin. I use the latter and don’t quite sure that AdBlock still allows to write custom rules.
But some years ago I used AdBlock only and custom rules worked perfectly there.
I personally use Firefox web browser but the same technique (same rules and plugins) should work on Chrome.

All these ad-blocking plugins have some kind of “element picker” which allows you to point out (using mouse) some (annoying) element on the web page so plugin could hide it. Unfortunately this tool works fine only with uncomplicated document structure and only when annoying element has distinctive id or class because that is how elements on the page are identified.

In some cases, especially when site’s owner decided to fight against ad-blocking plugins using random names for ids and classes, you should investigate the structure of web-document and create custom rules for ad-blocking software.

In a nutshell – you should find some other distinctive feature of the element you want to hide.
Often instead of hiding nasty element itself you should hide its descendants or parent because the element itself lack of distinctive features.

Here is the plan:
1) I assume that advertisement block, which bothers you doesn’t get caught by ad-blocker automatically. I also assume that you’ve tried the next level of defense against this pesky commercial and used “element picker” or similar tools that allow to choose element on a web page using GUI but you didn’t achieve your goal.
2) You should use internal “developer tools” (do you remember Firebug?) in your browser to view the source code of the element you are interested in.
Right click on the element of the page and chose “Inspect” in Chrome browser or “Inspect Element” in Firefox.
The frame containing developer tools will be opened. This frame consists of some pages but we are interested in “Elements” in Chrome and “Inspector” in Firefox.
These pages show a neat tree structure of the source code of the page.
When your mouse pointer is hovering over some line of code – corresponding element is highlighted on the page.
Thanks to tree-like code structure you can easily find all parents of the element you want to hide. They are to the up and left of original element.
Thanks to visual feedback on hovering – you can infer wether it is possible to block a child element instead of element was selected when you just opened “Inspector”.
3) Using “developer tools” you should find distinctive features – (tag attribute or even tag content) of the elements you want to hide. It can be some attribute that they were unable to make with random name or it can be constant part of random name.
4) you write “kind-of-css-selector” as a custom rule for your ad-blocker.
5) you are living happily until the structure of your page is changed again.

Example:
For instance consider site avito.ru. This site may not work for ip addresses outside of Russia, at least it doesn’t work in Tor Browser. This site helps people to sell/buy used things and apparently is aimed to russian audience.
Recently they added too many annoying, sticking and changing advertisements which I don’t interested in. So let’s try to remove them using uBlock Origin in Chromium browser.

At the bottom of each search page there is a dynamic advertisement block consisting of three sub-blocks.
Let’s try to remove it using uBlock Origin’s element picker:

Unfortunately, this element has random id so on another page or after page reloading it will be different.

Ok, let’s look into source code of this element. Right click somewhere on the element and chose “Inspect”.

It seems that all containers that include our element as a whole (all three advertisements) have random ids and classes and have no other distinctive attributes.

But child elements, separate advertisement sub-blocks have such a feature. They have attribute “data-id” which can be used to find this sub-element on the page. No one other element has such attribute. Of course, site’s owner could add this attribute to all other elements to obfuscate the detection of advertisement. But they haven’t done it yet.

Our next move is to open Chromium settings: Menu -> Settings -> Settings -> Extensions -> uBlock Origin Details -> Extension options -> My Filters…
It’s a long way – isn’t it? That’s why I think we shouldn’t bother about obfuscation…

There will be the field, where user can write custom blocking rules.
If I add there string www.avito.ru##div[data-id] the advertisement block will disappear.
The string means: remove any DIV element, containing attribute data-id on the site www.avito.ru

It’s just one real example. Personally me use about 10 similar simple rules to cut-out absolutely all advertisements from this site.