← Todos los artículos

Tutoriales

Bloquea anuncios de display y cajas patrocinadas con CSS

17 mayo 2026 · por JustZix Team

Un bloqueador de anuncios dedicado es estupendo, pero a veces solo quieres que desaparezcan unos espacios publicitarios concretos: el banner fijo bajo un vídeo, la caja de "recomendados" repleta de enlaces patrocinados, el enorme banner sobre un artículo. JustZix te permite ocultarlos con CSS puro.

Ocultar con CSS frente a bloquear en red

Un bloqueador de anuncios tradicional detiene las peticiones de anuncios a nivel de red. Ocultar con CSS es distinto: el anuncio puede seguir cargándose, pero nunca lo ves. Eso suena peor, pero tiene ventajas reales. Las reglas CSS nunca rompen la maquetación de un sitio como puede hacerlo una petición bloqueada, son triviales de escribir y funcionan en espacios que un bloqueador de red se pierde, como las cajas de "patrocinado" propias de un editor servidas desde el mismo dominio que los artículos.

Receta 1: ocultar los contenedores de anuncios estándar

La industria de los anuncios de display estandarizó un puñado de tamaños de espacio y nombres de clase. Esta regla barre los más comunes.

/* Espacios estándar de anuncios de display */
[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;
}

Los selectores de atributo [id^="ad-"], [id*="-ad-"] y [id$="-ad"] coinciden con el inicio, el medio y el final de un id, capturando ad-top, main-ad-rail y sidebar-ad respectivamente.

Receta 2: colapsar el espacio vacío

Ocultar un anuncio con display: none suele eliminar también su espacio, pero los espacios publicitarios reservados a veces tienen una altura fija fijada en un elemento padre. Si ves un hueco en blanco, colápsalo.

/* Colapsar el espacio reservado para anuncios */
.ad-wrapper, .ad-placeholder, [data-ad-slot] {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
}

Receta 3: quitar las cajas de "patrocinado" y "promocionado"

El contenido patrocinado servido por el editor es el tipo más difícil de atrapar para un bloqueador de red, porque viene del mismo servidor que los artículos reales. El CSS puede apuntar a él por las etiquetas que llevan estos bloques.

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

Taboola y Outbrain, las dos mayores redes de widgets de "por la web", tienen nombres fiables, así que esos selectores limpian la mayor parte del desorden al final de los artículos en los sitios de noticias.

Receta 4: un barrido JS para anuncios inyectados dinámicamente

Algunos scripts de anuncios inyectan espacios después del primer pintado. Una breve regla JavaScript los sigue limpiando a medida que aparecen.

// Eliminar continuamente los nodos de anuncios inyectados
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 });

Evita que rompa los sitios

Ocultar anuncios con CSS es seguro, pero dos de los selectores de arriba son amplios. Si un sitio pierde contenido real, limita la regla:

• Sustituye [class*="ad-banner"] por la clase exacta que veas en DevTools.
• Limita la regla a un dominio con un patrón como https://site.example/*.
• Mantén una regla global aparte y segura, y reserva los selectores agresivos para reglas por sitio.

Bonificación de rendimiento

Incluso cuando el anuncio aún se descarga, ocultarlo con CSS elimina trabajo de maquetación e impide que las animaciones que captan la atención repinten. En sitios de noticias pesados la página simplemente se siente más tranquila y se desplaza con más fluidez.

Pon en marcha las recetas

Instala desde la página de descargar JustZix y combina estas reglas con nuestros ejemplos listos para usar. Los anuncios suelen estar junto a cabeceras fijas que cubren el contenido: arréglalas con nuestra guía en /es/blog/remove-sticky-headers-that-cover-content. Unos pocos selectores hoy, una web más tranquila mañana.