El atributo class es usado para especificar una clase para un elemento HTML. Múltiples elementos HTML pueden utilizar la misma clase.

Usar el atributo class

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

En el siguiente ejemplo tenemos tres elementos <div> con un atributo class con el valor de "ciudad". Los tres elementos <div> tendrán el mismo estilo de acuerdo con la definición de estilo .city en la sección principal.

Ejm

<!DOCTYPE html>
<html>
<head>
<style>
.city {
  background-color: tomato;
  color: white;
  border: 2px solid black;
  margin: 20px;
  padding: 20px;
} 
</style>
</head>
<body>

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

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

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

</body>
</html>

Sugerencia: el atributo class se puede usar en cualquier elemento HTML.

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

Sintaxis para class

Para crear una clase, escribe un carácter de punto (.), seguido de un nombre de clase. Luego, define las propiedades CSS entre llaves {}.

Ejm

<!DOCTYPE html>
<html>
<head>
<style>
.city {
  background-color: tomato;
  color: white;
  padding: 10px;
}
</style>
</head>
<body>

<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>

</body>
</html>

Múltiples clases

Los elementos HTML pueden pertenecer a más de una clase. Para definir varias clases, separa los nombres de las clases con un espacio, por ejm <div class="ciudad principal">. El elemento se diseñará de acuerdo con todas las clases especificadas.

En el siguiente ejemplo, el primer elemento <h2> pertenece tanto a la clase de ciudad como a la clase principal, y obtendrá los estilos CSS de ambas clases.

Ejm

<!DOCTYPE html>
<html>
<head>
<style>
.city {
background-color: tomato;
color: white;
padding: 10px;
}

.main {
text-align: center;
}
</style>
</head>
<body>

<h2>Multiple Classes</h2>
<p>Here, all three h2 elements belongs to the "city" class. 
In addition, London also belongs to the "main" class, 
which center-aligns the text.</p>

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

</body>
</html>

Diferentes elementos pueden compartir la misma clase

Diferentes elementos HTML pueden apuntar al mismo nombre de clase. En el siguiente ejemplo, tanto <h2> como <p> apuntan a la clase "city" y compartirán el mismo estilo.

Ejm

<!DOCTYPE html>
<html>
<head>
<style>
.city {
background-color: tomato;
color: white;
padding: 10px;
} 
</style>
</head>
<body>

<h2>Different Elements Can Share Same Class</h2>

<p>Even if the two elements do not have the same tag name, they can both point to the same class, and get the same CSS styling:</p>

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

</body>
</html>

Uso del 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 elementos con un nombre de clase específico con el método getElementsByClassName().

Ejm

<!DOCTYPE html>
<html>
<body>

<h2>Use of The class Attribute in JavaScript</h2>
<p>Click the button to hide all elements with class name "city":</p>

<button onclick="myFunction()">Hide elements</button>

<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>

<script>
function myFunction() {
var x = document.getElementsByClassName("city");
for (var i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
}
</script>

</body>
</html>