Docs ejecutables de CSS: Selector de clase

Q: ¿Cómo se selecciona una clase en CSS?

Escribe un punto seguido del nombre de la clase: .card { ... } da estilo a todos los elementos con class="card". El punto va solo en el CSS; el atributo HTML no lleva punto.

Q: ¿Cómo selecciono un elemento que tiene dos clases?

Encadena los selectores de clase sin espacio: .btn.primary selecciona los elementos que tienen ambas clases. Con un espacio, .btn .primary significa un elemento .primary dentro de un elemento .btn.

El selector de clase

Un selector de clase es un punto seguido de un nombre de clase. Da estilo a todos los elementos cuyo atributo class contiene ese nombre, sea cual sea el tipo de elemento.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Class selector</title>
  <style>
    .badge {
      background: #2563eb;
      color: white;
      padding: 2px 10px;
      border-radius: 999px;
      font-size: 14px;
    }
  </style>
</head>
<body>
  <p>New <span class="badge">beta</span></p>
  <h2>Release <span class="badge">v2</span></h2>
  <a class="badge" href="#">a link with the class</a>
</body>
</html>

El punto aparece solo en el CSS. En el HTML el atributo es class="badge", sin punto. Los nombres de clase distinguen mayúsculas y minúsculas: .Badge no coincide con class="badge".

Varias clases en un elemento

Un elemento puede llevar cualquier cantidad de clases, separadas por espacios. Cada una aporta sus propias reglas, y así se construyen variantes a partir de piezas pequeñas:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Multiple classes</title>
  <style>
    .btn {
      border: 2px solid #2563eb;
      background: white;
      color: #2563eb;
      padding: 8px 14px;
      border-radius: 6px;
    }
    .primary { background: #2563eb; color: white; }
    .large { font-size: 20px; }

    /* chained: only elements with BOTH classes */
    .btn.danger { border-color: #f59e0b; color: #111827; background: #f59e0b; }
  </style>
</head>
<body>
  <button class="btn">Default</button>
  <button class="btn primary">Primary</button>
  <button class="btn primary large">Primary large</button>
  <button class="btn danger">Danger</button>
  <span class="danger">.danger alone: no style</span>
</body>
</html>

.btn.danger, sin espacio, selecciona los elementos que tienen ambas clases. El último span tiene danger pero no btn, así que la regla encadenada no lo toma.

Variantes del selector de clase

Selector	Selecciona
`.note`	Cualquier elemento con la clase `note`
`p.note`	Solo los elementos `<p>` con la clase `note`
`.btn.primary`	Elementos con `btn` y `primary` a la vez
`.card .title`	Un `.title` en cualquier parte dentro de un `.card`
`.card > .title`	Un `.title` cuyo padre es un `.card`
`.a, .b`	Elementos con `a` o con `b`

La diferencia entre poner espacio o no se explica, junto con más combinadores, en la página de selectores CSS.

El selector de ID

Un selector de ID es una almohadilla seguida del id: #site-header da estilo al elemento con id="site-header". Un id debe ser único en la página, así que un selector de ID apunta exactamente a un elemento.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>ID selector</title>
  <style>
    #summary {
      border: 2px solid #16a34a;
      padding: 10px;
      border-radius: 6px;
    }
    #details { margin-top: 8px; background: #e5e7eb; padding: 10px; }
  </style>
</head>
<body>
  <div id="summary">Styled by #summary</div>
  <div id="details">Styled by #details</div>
</body>
</html>

Los ids sirven para algo más que el estilo: href="#details" desplaza la página hasta el elemento, <label for="email"> apunta al id de un input y JavaScript lo encuentra con document.getElementById('details'). Ese es el motivo habitual para darle un id a un elemento; para el estilo, una clase es mejor herramienta.

Clase vs ID

	Clase `.name`	ID `#name`
Por página	Muchos elementos	Un elemento
Por elemento	Varias, separadas por espacios	Uno
Especificidad	(0,1,0)	(1,0,0)
Destino de enlace (`#name` en una URL)	No	Sí
Ideal para	Dar estilo	Anclas, labels, puntos de entrada para JavaScript

La diferencia de especificidad es la razón práctica para dar estilo con clases. Un ID le gana a cualquier cantidad de clases, así que una regla escrita con un ID solo se puede sobrescribir con otro ID, un estilo en línea o !important:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Specificity</title>
  <style>
    #promo { background: #e5e7eb; padding: 10px; }
    .card.featured.highlight { background: #f59e0b; } /* three classes */
  </style>
</head>
<body>
  <div id="promo" class="card featured highlight">
    Still gray: the ID beats three classes.
  </div>
</body>
</html>

Agregar y quitar clases con JavaScript

Las clases son la forma normal de que JavaScript cambie el aspecto de algo: el CSS define los estados y el script solo los alterna.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>classList</title>
  <style>
    .panel { border: 2px solid #e5e7eb; padding: 10px; border-radius: 6px; }
    .panel.open { border-color: #2563eb; background: #eff6ff; }
  </style>
</head>
<body>
  <button id="toggle">Toggle .open</button>
  <div class="panel" id="panel">The panel.</div>
  <script>
    const panel = document.getElementById('panel');
    document.getElementById('toggle').addEventListener('click', () => {
      panel.classList.toggle('open');
      panel.textContent = 'class="' + panel.className + '"';
    });
  </script>
</body>
</html>

classList también tiene add, remove, contains y replace. Evita asignar className directamente: reemplaza todas las clases que tenía el elemento.

Cómo nombrar las clases

Las letras, dígitos, guiones y guiones bajos son seguros: card, card-title, card__title, is-open.
No empieces un selector con un dígito ni con un guion seguido de un dígito. .2col es CSS inválido. Empieza con una letra (.cols-2) o escapa el dígito (.\32 col).
Nombra por propósito, no por aspecto: .error sobrevive a un rediseño, .red-text no.
Una convención de nombres ayuda en proyectos grandes. BEM escribe block__element--modifier, por ejemplo .card__title--large.

Errores comunes

Poner el punto en el HTML. class=".badge" nunca coincide con .badge.
Dos atributos class. <p class="a" class="b"> se queda solo con a. Usa class="a b".
Un espacio cuando querías ambas clases. .btn .primary busca un elemento anidado; .btn.primary es el mismo elemento.
Repetir un id. Los ids duplicados rompen getElementById, los enlaces a anclas y la asociación con labels, aunque el CSS parezca funcionar.
Dar estilo a todo con ids. Su especificidad hace que sobrescribir después sea doloroso; usa clases.

Preguntas frecuentes

¿Cómo se selecciona una clase en CSS?

Escribe un punto seguido del nombre de la clase: .card { ... } da estilo a todos los elementos con class="card". El punto va solo en el CSS; el atributo HTML no lleva punto.

¿Qué diferencia hay entre una clase y un id en CSS?

Una clase se puede usar en cualquier cantidad de elementos y un elemento puede tener varias; un id debe ser único en la página y un elemento tiene como máximo uno. En CSS, #id tiene una especificidad mucho mayor que .class, así que las reglas con ID son más difíciles de sobrescribir.

¿Cómo le pongo dos clases a un elemento?

Separa los nombres con un espacio dentro de un solo atributo: class="btn primary". Escribir class dos veces en un elemento no funciona; el navegador se queda solo con el primer atributo.

¿Cómo selecciono un elemento que tiene dos clases?

Encadena los selectores de clase sin espacio: .btn.primary selecciona los elementos que tienen ambas clases. Con un espacio, .btn .primary significa un elemento .primary dentro de un elemento .btn.

¿Un nombre de clase CSS puede empezar con un número?

En HTML sí, pero un selector no puede empezar con un dígito sin escapar, así que .1col es CSS inválido. Escapa el dígito (.\31 col) o, mejor, empieza los nombres de clase con una letra.

Conceptos relacionados