AdBlock Advanced Selectors

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.

CSS Ninja Techniques – Download Links Icon In Pure CSS

    Use advance CSS rules to give your users a little more information about links, that has the download attribute, this is similar to a previous article I’ve wrote, on how mark page’s external-links, similar to how its done in Wikipedia’s pages, using CSS3’s ::after pseudo-element.

    icompile.eladkarako.com__css_ninja_techniques___download_links_icon_in_pure_css

    first thing is downloading nice “download icon”,
    I’ve used the second download icon from the Font-Awesome package,

    icompile.eladkarako.com__css_ninja_techniques___download_links_icon_in_pure_css__original_icon_aka_download63
    here is just the png from the package above

    edit it (I’ve used Paint.Net), remove the white background, resize it to about 12px/12px, make it transparent so the background-colors of the page will blend with the image, making it less sharp and more “theme suitable”.. I’ve tuned it down to about 180 of 255 transparency (255 is the “100%”).

    icompile.eladkarako.com__css_ninja_techniques___download_links_icon_in_pure_css__modified_icon
    and here is the just the modified image

    convert it to base64 and add the mime-type prefix,
    following with inserting it to your main style css file, using the following rule:

    a[download]:before{
      content: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAAMCAYAAAC5tzfZAAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAOwgAADsIBFShKgAAAABp0RVh0U29mdHdhcmUAUGFpbnQuTkVUIHYzLjUuMTFH80I3AAAA6ElEQVQoU7VSwQqCQBBVcNVNXRVJQUEPCvoLRR/SB0T9QNfIEDp1da4e/NHeWsRS1q0Hj5mdN4/ZcdXeURTFQgjRuq5Lvu93VVU5T+k76roWnPMbUrIs65bnuXgoP/B/UxzHazT1pmmSruuE0hTlWdajKNo8OhWkacohHpBOBpWMsUMYhhz5J5qmYbZt75D2oDT0MOyyLGNS/4rnxD1SadjPTsDSHcLrKjifyrJM8UYrcIm9jqruOM5Vk4uqRUnUWjzw1jCM04xGsyaVmEzDMBC+Ho3jOEXN87yz/GV+MUkSQt8UgyC43AH4oj71EqujyQAAAABJRU5ErkJggg==") center right no-repeat;
      margin: 0 6px 0 0;
    }
    

    a good practice will be to limit the effect of the CSS-rule to a specific part of the page,
    for example, for my WordPress, I’ve set the selector to:

    .content .posts a[download]:before{
    

    so only the to the content at the main container will be effected..