← All posts

Tutorials

Block display ads and sponsored boxes with CSS

17 May 2026 · by JustZix Team

A dedicated ad blocker is great, but sometimes you just want a few specific ad slots gone — the sticky banner under a video, the "recommended" box stuffed with sponsored links, the giant leaderboard above an article. JustZix lets you hide them with plain CSS.

CSS hiding versus network blocking

A traditional ad blocker stops ad requests at the network level. CSS hiding is different: the ad may still load, but you never see it. That sounds worse, yet it has real advantages. CSS rules never break a site's layout the way a blocked request can, they are trivial to write, and they work on slots a network blocker misses — like a publisher's own "sponsored" boxes served from the same domain as the articles.

Recipe 1: Hide standard ad containers

The display-ad industry standardized on a handful of slot sizes and class names. This rule sweeps the common ones.

/* Standard display-ad slots */
[id^="ad-"], [id*="-ad-"], [id$="-ad"],
[class*="ad-slot"], [class*="ad-banner"],
[class*="advert"], [class*="ad-container"],
ins.adsbygoogle, iframe[src*="doubleclick"],
iframe[src*="googlesyndication"] {
  display: none !important;
}

The attribute selectors [id^="ad-"], [id*="-ad-"] and [id$="-ad"] match the start, middle, and end of an id, catching ad-top, main-ad-rail, and sidebar-ad respectively.

Recipe 2: Collapse the empty space

Hiding an ad with display: none usually removes its space too, but reserved ad slots sometimes have a fixed height set on a parent. If you see a blank gap, collapse it.

/* Collapse reserved ad space */
.ad-wrapper, .ad-placeholder, [data-ad-slot] {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
}

Recipe 3: Strip "sponsored" and "promoted" boxes

Publisher-served sponsored content is the hardest kind for a network blocker to catch, because it comes from the same server as real articles. CSS can target it by the labels these blocks carry.

/* Sponsored / promoted content blocks */
[class*="sponsored"], [class*="promoted"],
[class*="partner-content"], [class*="taboola"],
[class*="outbrain"], [id*="taboola"],
section[aria-label*="sponsored" i] {
  display: none !important;
}

Taboola and Outbrain — the two biggest "around the web" widget networks — are reliably named, so those selectors clear most of the bottom-of-article clutter on news sites.

Recipe 4: A JS sweep for dynamically injected ads

Some ad scripts inject slots after the first paint. A short JavaScript rule keeps clearing them as they appear.

// Continuously remove injected ad nodes
const AD_HINTS = ['sponsored', 'advert', 'ad-slot', 'taboola', 'outbrain'];

function clearAds() {
  document.querySelectorAll('div, aside, section, iframe').forEach(el => {
    const tag = (el.id + ' ' + el.className).toLowerCase();
    if (AD_HINTS.some(h => tag.includes(h))) {
      el.remove();
    }
  });
}

clearAds();
new MutationObserver(clearAds)
  .observe(document.body, { childList: true, subtree: true });

Keep it from breaking sites

CSS ad hiding is safe, but two selectors above are broad. If a site loses real content, narrow the rule:

• Replace [class*="ad-banner"] with the exact class you see in DevTools.
• Scope the rule to one domain with a pattern like https://site.example/*.
• Keep a separate, safe global rule and reserve aggressive selectors for per-site rules.

Performance bonus

Even when the ad still downloads, hiding it with CSS removes layout work and stops attention-grabbing animations from repainting. On heavy news sites the page simply feels calmer and scrolls smoother.

Get the recipes running

Install from the download JustZix page and pair these rules with our ready-made examples. Ads often sit next to sticky headers that cover content — fix those with our guide at /en/blog/remove-sticky-headers-that-cover-content. A few selectors today, a quieter web tomorrow.