HTML5: Clases

Usando el atributo de clase

El atributo class especifica uno o más nombres de clase para un elemento HTML.
El nombre de la clase puede ser usado por CSS y JavaScript para realizar ciertas tareas para elementos con el nombre de clase especificado.
En CSS, para seleccionar elementos con una clase específica, escriba un carácter de punto (.), seguido del nombre de la clase:

  <style>
    .city {
      background-color: tomato;
      color: white;
      padding: 10px;    }
  </style>

  <h2 class="city">London</h2>
  <p>London is the capital of England.</p>

  <h2 class="city">Paris</h2>
  <p>Paris is the capital of France.</p>

  <h2 class="city">Tokyo</h2>
  <p>Tokyo is the capital of Japan.</p>

Vista en navegador del ejemplo anterior

Consejo: El atributo class se puede usar en cualquier elemento HTML.

Nota: ¡El nombre de la clase distingue mayúsculas de minúsculas!

Clases múltiples

Los elementos HTML pueden tener más de un nombre de clase, cada nombre de clase debe estar separado por un espacio.

Ejemplo

Elementos de estilo con el nombre de clase "city", también elementos de estilo con el nombre de clase "main":

  <h2 class="city main">London</h2>
  <h2 class="city">Paris</h2>
  <h2 class="city">Tokyo</h2>

En el ejemplo anterior, el primer elemento <h2> pertenece tanto a la clase "city" como a la clase "main".

Misma clase, etiqueta diferente

Diferentes etiquetas, como <h2> y <p>, pueden tener el mismo nombre de clase y compartir el mismo estilo:

  <style>
    .city {
      background-color: tomato;
      color: white;
      padding: 10px;    }
  </style>

  <h2 class="city">Paris</h2>
  <p class="city">Paris is the capital of France</p>

Vista en navegador del ejemplo anterior

¡Ponte a prueba con ejercicios!

• Ejercicio 1
• Ejercicio 2
• Ejercicio 3

Capítulo anterior: "HTML5: Elementos de bloque HTML y elementos en línea"
Próximo capítulo: "HTML5: id"