El atributo HTML class

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

Usar el atributo class

El atributo class se usa a menudo para señalar un nombre de clase en una hoja de estilo. También puede ser utilizado por un 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 “city”. Los tres elementos <div> tendrán el mismo estilo de acuerdo con la definición de estilo .city en la sección del encabezado.

Ejm

<!DOCTYPE html>
<html lang="es">
	<head>
    	<style>
			.city
			{
				background-color:tomato;
				color:white;
				border: 2px solid black;
				margin:20px;
				padding:20px;	
			}
		</style>
    </head>
    <body>
    	<div class="city">
        	<h2>Madrid</h2>
            <p>Madrid es la capital de España</p>
        </div>
        <div class="city">
        	<h2>París</h2>
            <p>París es la capital de Francia
        </div>
    </body>
</html>

En el siguiente ejemplo tenemos dos elementos <span> con un atributo class con el valor “note”. Ambos elementos <span> tendrán el mismo estilo de acuerdo con la definición de estilo .note en la sección de encabezado.

Ejm

<!DOCTYPE html>
<html>
<head>
<style>
.note {
  font-size: 120%;
  color: red;
}
</style>
</head>
<body>

<h1>My <span class="note">Important</span> Heading</h1>
<p>This is some <span class="note">important</span> text.</p>

</body>
</html>

Consejo: El atributo class se puede usar en cualquier elemento HTML. ¡El valor que le demos al atributo class 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 lang="es">
	<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>

Clases múltiples

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

Para definir varias clases, separa los nombres de las clases con un espacio, p. <div class = “ciudad principal”>. El elemento tendrá un estilo de acuerdo con todas las clases especificadas.

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

Ejm

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

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

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

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 lang="es">
	<body>
    	<button type="button" onClick="myFunction()">Elementos ocultos</button>
        
    	<h2>Uso del atributo class en Javascript</h2>
        <p>Haz clic en el botón para ocultar todos los elementos con la clase .city</p>
        
        <h2 class="city">Londres</h2>
        <p>Londres es la capital de Inglaterra</p>
        
        <h2 class="city">París</h2>
        <p>París es la capital de Francia</p>
        
        <h2 class="city">Madrid</h2>
        <p>Madrid es la capital de España</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>

Resumen

  • El atributo HTML class especifica uno o más nombres de clases para un elemento.
  • Las clases son usadas por CSS y Javascript para seleccionar y acceder a elementos específicos.
  • El atributo class puede ser usado en cualquier elemento HTML.
  • El atributo class es case sensitive.
  • Diferentes elementos HTML pueden apuntar a la misma clase.
  • Javascript puede acceder a elementos con un específico nombre de clase con el método getElementsByClassName().