HTML Classes

---

El atributo HTML class se utiliza para especificar una clase para un elemento HTML.

Múltiples elementos HTML pueden compartir la misma clase.

---

Uso del atributo class

El atributo class se usa a menudo para apuntar a un nombre de clase en una hoja de estilos (CSS). También puede ser utilizado por JavaScript para acceder y manipular elementos con el nombre específico de la clase.

En el siguiente ejemplo, tenemos tres elementos <div> con un atributo class con el valor city. Los tres elementos <div> recibirán el mismo estilo de acuerdo al estilo definido en .city.

Ejemplo:

En el siguiente ejemplo, tenemos dos elementos <span> con el atributo class con el valor note. Ambos elementos recibirán el mismo estilo especificado en la clase .note en el archivo CSS.

Ejemplo:

Tip: el atributo class se puede utilizar en cualquier elemento HTML

Nota: el nombre de un atributo class es case-sensitive (distingue entre mayúsculas y minúsculas)

---

Sintáxis

Para crear una clase, escriba un punto, seguido del nombre de la clase. Luego, defina las propiedades CSS dentro de las llaves {}.

Ejemplo:

Crea una clase llamada city:

.city {
  background-color: tomato;
  color: white;
  padding: 10px;
}

---

Múltiples clases

Los elementos HTML pueden pertenecer a más de una clase.

Para definir múltiples clases, separa los nombres de clases por un espacio (ejemplo div class="city main"). El elemento recibirá los estilos de acuerdo con todas las clases especificadas.

En el siguiente ejemplo, el primer elemento <h2> pertenece a la clase city, pero también a la clase main. y recibirá los estilos de las dos clases.

Ejemplo:

---

Diferentes elementos con el atributo class

Diferentes elementos HTML pueden apuntar a la misma clase.

En el siguiente ejemplo, <h2> y <p> apuntan a la clase city y recibirán el mismo estilo.

Ejemplo:

---

El atributo class en JavaScript

JavaScript también puede usar el nombre de la clase para realizar ciertas tareas para elementos específicos.

JavaScript puede acceder a los elementos HTML con un nombre de clase específico mediante el método getElementsByClassName():

Ejemplo:

Aprenderemos más sobre JavaScript a partir de los artículos 150 en adelante.

---

Resumen

• El atributo class especifica uno o más nombres de clase para un elemento.

• Las clases son utilizadas por CSS y JavaScript para seleccionar y acceder a elementos específicos.

• El atributo class puede ser usado en cualquier elemento HTML

• El nombre de clase es case-sensitive

• Diferentes elementos HTML pueden apuntar al mismo nombre de clase

• JavaScript puede acceder a los elementos que contengan un nombre de clase, mediante su método getElementsByClassName().

---

Traducido con 💚 desde W3Schools.com