Ocultar los banners de cookies en cualquier sitio — 5 snippets listos para usar

15 mayo 2026 · por JustZix Team

El RGPD debía darnos el control sobre las cookies. Nos dio pop-ups que cubren el 30% de la pantalla en uno de cada dos sitios. Este artículo muestra cinco maneras de deshacerte de ese muro de una vez por todas — con CSS, JavaScript y la extensión JustZix.

¿Es legal?

Sí. El RGPD y la directiva ePrivacy imponen obligaciones al gestor del sitio (debe pedir el consentimiento antes de instalar cookies). Por tu parte — como usuario — eres libre de modificar el aspecto de un sitio en tu navegador. Como cualquier bloqueador de anuncios o el modo Lectura de Safari. Una precisión importante: ocultar el banner por norma no equivale al consentimiento de las cookies — la mayoría de los sitios siguen instalando solo las cookies estrictamente necesarias hasta que pulsas explícitamente «Aceptar».

Método 1 — CSS universal sobre las clases más comunes

El más sencillo y seguro. Captura ~80% de los banners en la web:

/* Banners de cookies — clases e ID más comunes */
.cookie-banner,
.cookie-notice,
.cookie-consent,
.gdpr-banner,
.consent-banner,
#cookie-notice,
#cookieConsent,
#onetrust-banner-sdk,
[class*="CookieConsent"],
[id*="cookie-bar"] {
  display: none !important;
}

/* Muchos banners bloquean el scroll del body hasta el clic */
html, body {
  overflow: auto !important;
  position: static !important;
}

El segundo bloque es crucial — muchos banners ponen overflow: hidden en <body> para bloquear el scroll hasta que aceptes. Forzar overflow: auto restaura el comportamiento normal.

Método 2 — selectores de atributo agresivos

Cuando un sitio usa nombres de clase dinámicos (Tailwind, CSS-in-JS) y el patrón básico no coincide, apunta a los atributos:

/* Captura todo lo que tenga "cookie" o "consent" en la clase / ID */
[class*="cookie" i],
[id*="cookie" i],
[class*="consent" i],
[id*="consent" i],
[class*="gdpr" i],
[role="dialog"][aria-label*="cookie" i] {
  display: none !important;
}

El flag i en los selectores de atributo (p. ej. [class*="cookie" i]) los hace insensibles a mayúsculas. Sin él, .CookieBanner no coincidiría con "cookie".

Advertencia: este snippet puede capturar de más — p. ej. un artículo sobre las cookies (¡la ley!) también quedará oculto. Úsalo con criterio, idealmente en una carpeta de reglas limitada a dominios específicos.

Método 3 — selector `:has()` (moderno)

Desde Chrome 105 y Safari 15.4 puedes usar :has() — un selector que apunta a un elemento que contiene un hijo que coincide con un patrón. Perfecto para los banners de cookies, porque siempre tienen un botón «Aceptar» dentro:

/* Versión práctica — apunta a contenedores fixed/sticky con un botón Accept */
div:has(> button[aria-label*="Accept" i]),
div:has(> button[aria-label*="cookie" i]),
aside:has(> button[aria-label*="consent" i]) {
  display: none !important;
}

CSS no admite :contains() (es un invento de jQuery). Apuntamos en su lugar al atributo aria-label — los banners bien diseñados lo tienen de todos modos para los lectores de pantalla.

Método 4 — JavaScript pulsa «Aceptar» automáticamente

Cuando el CSS no basta (banner en el Shadow DOM, bloqueo a página completa), el JS pulsa por ti. Más rápido de lo que te das cuenta:

// Pulsa automáticamente los botones "Aceptar" — funciona incluso en iframes
let attempts = 0;
const interval = setInterval(() => {
  if (++attempts > 20) return clearInterval(interval);

  const candidates = [
    ...document.querySelectorAll('button, a[role="button"], input[type="button"]')
  ];

  const target = candidates.find(el => {
    const text = (el.textContent || el.value || '').trim().toLowerCase();
    const aria = (el.getAttribute('aria-label') || '').toLowerCase();
    return /^(aceptar todo|aceptar|acepto|permitir todo|accept all|accept)$/i
      .test(text) || /accept|aceptar|permitir/.test(aria);
  });

  if (target) {
    target.click();
    clearInterval(interval);
  }
}, 500);

Sondea cada 500ms durante 10 segundos (20 intentos × 500ms). Encuentra el primer botón que coincide — lo pulsa y se detiene. En la práctica: ni siquiera ves el banner.

Nota ética: al pulsar «Aceptar» consientes las cookies de marketing. Si eso te molesta — usa los Métodos 1+2 (ocultar sin aceptar). El sitio te ve entonces como un usuario anónimo que simplemente no ha respondido.

Método 5 — Shadow DOM (casos extremos)

OneTrust, Cookiebot, Usercentrics — los SaaS de banners de cookies más extendidos — a menudo renderizan su UI dentro del Shadow DOM. El CSS externo al shadow root no puede alcanzarlo. Hace falta JS:

// Encuentra el elemento host (por nombres comunes), entra en su shadowRoot
function hideShadowBanners() {
  const hosts = document.querySelectorAll(
    '#onetrust-consent-sdk, #usercentrics-root, #CybotCookiebotDialog'
  );

  hosts.forEach(host => {
    host.style.display = 'none';
    // Más el contenido shadow (si usa el shadow DOM)
    if (host.shadowRoot) {
      const style = document.createElement('style');
      style.textContent = ':host { display: none !important; }';
      host.shadowRoot.appendChild(style);
    }
  });
}

// Primera ejecución + observer para las inserciones tardías
hideShadowBanners();
new MutationObserver(hideShadowBanners)
  .observe(document.body, { childList: true, subtree: true });

El MutationObserver captura también los banners que se insertan después de DOMContentLoaded — normalmente los scripts de tracking cargan de forma asíncrona y el banner aparece 1-2 segundos después de cargar la página.

Cómo conectarlo a JustZix

Instala la extensión (página de descarga — ZIP, 2 minutos).
Pulsa el icono de JustZix → «Nueva regla».
Patrón de URL: * (para aplicar en todas partes) o https://example.com/* (un dominio).
En la pestaña CSS pega el Método 1 (universal) — déjalo activo.
Si te topas con un sitio donde no se oculta nada — añade el Método 4 como regla JS, limitada a ese dominio.
Sincroniza tu clave entre los dispositivos — el banner desaparece en el portátil, en el PC y en el ordenador del trabajo a la vez.

Trampas que evitar

No pongas display: none en html o body — ocultarías toda la página.
La carga de la página puede ralentizarse ligeramente — el JS de auto-aceptación que sondea 20 veces ocupa el event loop. En la práctica es imperceptible.
Algunos paywalls se disfrazan de banners de cookies (p. ej. los grandes sitios de noticias) — ocultar el banner no desbloquea el contenido. Ahí solo ayuda una regla dedicada por sitio.
El banner de una tienda puede ser obligatorio por ley (p. ej. el consentimiento en el checkout). No lo ocultes en los sitios donde piensas comprar.

Qué hacer después

El mismo enfoque funciona para los demás asesinos de la UX: pop-ups de newsletter, «activa las notificaciones», vistas previas de paywall. Mira más snippets listos para usar en la sección Ejemplos, o casos de uso reales para JustZix.

Instala JustZix y escribe tus propias reglas. El primer snippet de este artículo pegado en la extensión = el banner desaparece en el 80% de los sitios. El resto es solo iteración por dominio problemático.

Valora este artículo

Sin valoraciones — sé el primero.

Ocultar los banners de cookies en cualquier sitio — 5 snippets listos para usar

¿Es legal?

Método 1 — CSS universal sobre las clases más comunes

Método 2 — selectores de atributo agresivos

Método 3 — selector :has() (moderno)

Método 4 — JavaScript pulsa «Aceptar» automáticamente

Método 5 — Shadow DOM (casos extremos)

Cómo conectarlo a JustZix

Trampas que evitar

Qué hacer después

Valora este artículo

Ver también

Ajustes de Booksy: un calendario más claro y un modo enfoque

Ajustes de Allegro: más tranquilo, más denso y sin anuncios patrocinados

Ajustes de Canva — un editor más grande y menos ruido

Pruébalo tú mismo

Método 3 — selector `:has()` (moderno)