AdBlock Advanced Selectors

Posted at


Advanced selectors. Like A BOSS! 👔


💁 which are also applied to JavaScript's element.querySelector('....') and element.querySelectorAll('....'), and, naturally CSS3.


  • img[src^="https://example.com/ad"] (☞ "start with" match)
    will hide every image that starts with that string, (ad, ads, adware, ad_hello.. - included)


  • *[class*="ads-"] (☞ this is "middle match" or "everything match")
    class attribute is a long space-separated string ⚋⚋, this will hide elements, which are having anything (partial match, but case-sensitive!) looking like this, it will hide:

    • <div class="toobar-ads-top foo">....</div>

    • <span class="vendorads-2 hello">....</span>

    • but also stuff like <div class="no-ads-at-all">...</div> ;)




  • a[href$="/bad_page.html"] (☞ "match end")
    can help you hide links that are ending with this string, the long string can be something like this: https://example.com/pages/other_stuff/bad_page.html, and also http://cdn.example.com/just_another/bad_page.html.



see https://adblockplus.org/filter-cheatsheet and https://adblockplus.org/en/filters#elemhide_css

first test you use a correct syntax, open the developer-console and try to use document.querySelectorAll('img[src*="your_image.src"]') (or another selector of your choice that actually matches anything in your page


if this gets you an answer:
(full size)

You can go ahead and change it (slightly) to the AdBlock format which uses () instead of [],


meaning something like this #(id^="ads-container-")
or ||www.example.com#(class*="ads-")^

✨Enjoy Ads Free Browsing ✨ 😉

also answered in stackoverflow.