Docs ejecutables de CSS: Selectores CSS

Q: ¿Qué es un selector CSS?

La parte de una regla CSS que va antes de { y que indica a qué elementos se aplican las declaraciones. En p.note { color: blue; }, el selector p.note selecciona todos los con la clase note.

Q: ¿Qué diferencia hay entre un espacio y > en un selector CSS?

El espacio es el combinador descendiente: nav a selecciona todos los enlaces que están en cualquier parte dentro de un nav, a cualquier profundidad. > es el combinador de hijo: nav > a selecciona solo los enlaces cuyo padre directo es el nav.

Q: ¿Qué significa + en CSS?

es el combinador de hermano adyacente. h2 + p selecciona un que viene justo después de un con el mismo padre. ~ es más amplio: h2 ~ p selecciona todos los hermanos posteriores.

Q: ¿Cómo selecciono elementos por atributo en CSS?

Pon el atributo entre corchetes: [disabled] selecciona los elementos que lo tienen, [type="email"] un valor exacto, [href^="https"] un valor que empieza con un texto, [href$=".pdf"] uno que termina con él y [class*="btn"] uno que lo contiene.

Q: ¿CSS puede seleccionar un elemento padre?

Sí, con la pseudoclase :has(), compatible con las versiones actuales de Chrome, Firefox y Safari. li:has(> a.active) selecciona los elementos de lista que contienen directamente un enlace activo.

Qué es un selector CSS

Un selector es la parte de una regla que va antes de las llaves. Decide a qué elementos se aplican las declaraciones.

p.note { color: #2563eb; }
/* selector: p.note    declaration: color: #2563eb */

Los cinco selectores básicos cubren la mayoría de las hojas de estilo reales:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Basic selectors</title>
  <style>
    * { box-sizing: border-box; }           /* universal: every element */
    p { margin: 6px 0; }                    /* type: every <p> */
    .tip { background: #e5e7eb; padding: 6px; } /* class */
    #main-title { color: #2563eb; }         /* ID: one element */
    h2, .lead { font-style: italic; }       /* group: either one */
  </style>
</head>
<body>
  <h1 id="main-title">Selectors</h1>
  <p class="lead">A lead paragraph (grouped with h2).</p>
  <p class="tip">A tip, matched by .tip</p>
  <h2>A subheading</h2>
  <p>A plain paragraph.</p>
</body>
</html>

Tipos de selectores de un vistazo

Selector	Ejemplo	Selecciona
Universal	`*`	Todos los elementos
De tipo	`p`	Todos los `<p>`
De clase	`.tip`	Los elementos con `class="tip"` (entre otras)
De ID	`#main-title`	El elemento con `id="main-title"`
De atributo	`[type="email"]`	Los elementos cuyo atributo coincide
Pseudoclase	`a:hover`, `li:first-child`	Elementos en un estado o posición
Pseudoelemento	`p::first-line`, `.x::before`	Una parte de un elemento
Grupo	`h1, h2, h3`	Todo lo que coincida con uno de la lista
Compuesto	`p.tip`	Un `<p>` que además tiene la clase

Las clases y los IDs tienen su propia página, selector de clase CSS. Las pseudoclases como :nth-child() y :not() se explican en la página de pseudoclases.

Combinadores: descendiente vs hijo

Un combinador une dos selectores según su relación en el árbol HTML. Hay cuatro.

Combinador	Sintaxis	Selecciona `B` cuando
Descendiente	`A B` (espacio)	B está en cualquier parte dentro de A
Hijo	`A > B`	El padre de B es A
Hermano adyacente	`A + B`	B viene justo después de A, con el mismo padre
Hermano general	`A ~ B`	B viene en algún lugar después de A, con el mismo padre

El espacio y el > son la pareja que más se confunde. El selector descendiente llega a cualquier profundidad; el selector de hijo se queda en un nivel:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Child selector</title>
  <style>
    li { padding: 2px 6px; margin: 2px 0; }
    .all li { background: #e5e7eb; }          /* descendant: every level */
    .direct > li { border-inline-start: 4px solid #2563eb; } /* child: top level only */
  </style>
</head>
<body>
  <ul class="all direct">
    <li>Top level: gray and blue edge</li>
    <li>Top level: gray and blue edge
      <ul>
        <li>Nested: gray only</li>
        <li>Nested: gray only</li>
      </ul>
    </li>
  </ul>
</body>
</html>

Combinadores de hermanos: + y ~

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Siblings</title>
  <style>
    p { margin: 4px 0; padding: 4px 8px; }
    h2 + p { background: #f59e0b; }   /* only the first p after h2 */
    h2 ~ p { color: #2563eb; }        /* every p after h2 */
  </style>
</head>
<body>
  <p>Before the heading: untouched.</p>
  <h2>Heading</h2>
  <p>Right after h2: amber and blue.</p>
  <p>Later sibling: blue only.</p>
  <p>Later sibling: blue only.</p>
</body>
</html>

Los hermanos solo miran hacia adelante. No existe un combinador de "hermano anterior", aunque :has() puede expresarlo: h2:has(+ p) selecciona un h2 al que le sigue directamente un p.

Selectores de atributo

Los corchetes seleccionan por atributos y sus valores:

Selector	Selecciona
`[disabled]`	Tiene el atributo, con cualquier valor
`[type="email"]`	El valor es exactamente `email`
`[href^="https"]`	El valor empieza con `https`
`[href$=".pdf"]`	El valor termina con `.pdf`
`[class*="icon"]`	El valor contiene `icon` en cualquier parte
`[lang\|="en"]`	El valor es `en` o empieza con `en-`
`[data-state="open" i]`	Coincidencia exacta, sin distinguir mayúsculas

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Attribute selectors</title>
  <style>
    a { display: block; margin: 4px 0; }
    a[href^="https"] { color: #16a34a; }
    a[href$=".pdf"] { font-weight: bold; }
    a[href$=".pdf"]::after { content: " (PDF)"; }
    input[type="email"] { border: 2px solid #2563eb; }
    [data-state="open"] { background: #e5e7eb; padding: 4px; }
  </style>
</head>
<body>
  <a href="https://example.com">External, https: green</a>
  <a href="/guide.pdf">Guide, bold with a label</a>
  <a href="/about">Relative link: untouched</a>
  <input type="email" placeholder="Email: blue border">
  <div data-state="open">data-state="open"</div>
</body>
</html>

Los selectores de atributo sobre atributos data-* son una forma limpia de dar estilo a un estado que pone JavaScript, sin inventar nombres de clase.

Prueba cualquier selector

Escribe un selector en la caja. Cada elemento que coincide recibe un contorno ámbar, y el total aparece debajo.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Selector tester</title>
  <style>
    .hit { outline: 3px solid #f59e0b; }
    #demo { border: 1px solid #e5e7eb; padding: 8px; margin-top: 8px; }
    #demo * { margin: 4px 0; }
  </style>
</head>
<body>
  <input id="sel" value="#demo li:nth-child(2)" size="30">
  <span id="out"></span>
  <div id="demo">
    <h2 class="title">Title</h2>
    <p class="intro">Intro <a href="/a">link</a></p>
    <ul>
      <li>One</li>
      <li class="active">Two</li>
      <li>Three <a href="https://example.com">external</a></li>
    </ul>
  </div>
  <script>
    const sel = document.getElementById('sel');
    const out = document.getElementById('out');
    const run = () => {
      document.querySelectorAll('.hit').forEach((el) => el.classList.remove('hit'));
      try {
        const found = document.querySelectorAll(sel.value);
        found.forEach((el) => el.classList.add('hit'));
        out.textContent = found.length + ' match(es)';
      } catch (e) {
        out.textContent = 'Invalid selector';
      }
    };
    sel.addEventListener('input', run);
    run();
  </script>
</body>
</html>

Prueba #demo a, ul > li, h2 ~ *, a[href^="https"], li:not(.active).

Compuesto vs descendiente: el espacio importa

p.note y p .note se diferencian en un espacio y significan cosas distintas.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Space matters</title>
  <style>
    p.note { background: #e5e7eb; }      /* a p that has .note */
    p .note { color: #16a34a; font-weight: bold; } /* a .note inside a p */
  </style>
</head>
<body>
  <p class="note">p.note: gray background</p>
  <p>Plain p with a <span class="note">span.note inside</span></p>
</body>
</html>

Cómo leen los selectores los navegadores

Cuando varias reglas coinciden con el mismo elemento y definen la misma propiedad, gana el selector más específico y, si empatan, gana el posterior. Un ID pesa más que cualquier cantidad de clases, y una clase pesa más que cualquier cantidad de selectores de tipo; la página de !important tiene la tabla completa de especificidad.

Los grupos tienen una trampa: si cualquier selector de una lista simple es inválido, se descarta toda la regla. En a, b:unknown { } ni siquiera los enlaces reciben estilo. Envolver la lista en :is() la hace tolerante, así que :is(a, b:unknown) sigue dando estilo a los enlaces.

Errores comunes

Olvidar el punto o la almohadilla. tip { } apunta a un elemento <tip>, no a class="tip". Escribe .tip.
Un espacio en un selector compuesto. p .note no es p.note.
Esperar que > llegue a los nietos. Usa un espacio para cualquier profundidad.
Un error de escritura rompe todo un grupo. En h1, h2:hovr, h3 nada recibe estilo.
Selectores demasiado largos. body div.wrapper ul li a es difícil de leer y de sobrescribir. Una sola clase suele ser suficiente.

Preguntas frecuentes

¿Qué es un selector CSS?

La parte de una regla CSS que va antes de { y que indica a qué elementos se aplican las declaraciones. En p.note { color: blue; }, el selector p.note selecciona todos los <p> con la clase note.

¿Qué diferencia hay entre un espacio y > en un selector CSS?

El espacio es el combinador descendiente: nav a selecciona todos los enlaces que están en cualquier parte dentro de un nav, a cualquier profundidad. > es el combinador de hijo: nav > a selecciona solo los enlaces cuyo padre directo es el nav.

¿Qué significa + en CSS?

+ es el combinador de hermano adyacente. h2 + p selecciona un <p> que viene justo después de un <h2> con el mismo padre. ~ es más amplio: h2 ~ p selecciona todos los hermanos <p> posteriores.

¿Cómo selecciono elementos por atributo en CSS?

Pon el atributo entre corchetes: [disabled] selecciona los elementos que lo tienen, [type="email"] un valor exacto, [href^="https"] un valor que empieza con un texto, [href$=".pdf"] uno que termina con él y [class*="btn"] uno que lo contiene.

¿CSS puede seleccionar un elemento padre?

Sí, con la pseudoclase :has(), compatible con las versiones actuales de Chrome, Firefox y Safari. li:has(> a.active) selecciona los elementos de lista que contienen directamente un enlace activo.

Conceptos relacionados