HTML Atributo de clase
El atributo HTML class se utiliza para especificar una clase para un elemento HTML.
Varios elementos HTML pueden compartir la misma clase.
Usando el atributo de clase
El atributo class se utiliza a menudo para señalar 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 "city". Los tres elementos <div> tendrán el mismo estilo según la definición de estilo .city en el encabezado sección:
Ejemplo
<!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>
Inténtalo tú mismo »
En el siguiente ejemplo tenemos dos elementos <span> con un atributo class con el valor de "note". Ambos elementos <span> tendrán el mismo estilo según la definición de estilo .note en la sección principal:
Ejemplo
<!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>
Inténtalo tú mismo »
Consejo: El atributo class se puede utilizar en cualquier elemento HTML.
Nota: ¡El nombre de la clase distingue entre mayúsculas y minúsculas!
Consejo: Puedes aprender mucho más sobre CSS en nuestro Tutorial CSS.
La sintaxis de la clase
Para crear una clase; escriba un carácter de punto (.), seguido del nombre de una clase. Luego, defina las propiedades CSS entre llaves {}:
Ejemplo
Crea una clase llamada "city":
<!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>
Inténtalo tú mismo »
Múltiples clases
Los elementos HTML pueden pertenecer a más de una clase.
Para definir varias clases, separe los nombres de las clases con un espacio, p. <div class="city main">. El estilo del elemento se diseñará 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 clase y obtendrá los estilos CSS de ambas clases:
Ejemplo
<h2 class="city main">London</h2>
<h2 class="city">Paris</h2>
<h2 class="city">Tokyo</h2>
Inténtalo tú mismo »
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 comparte el mismo estilo:
Ejemplo
<h2 class="city">Paris</h2>
<p class="city">Paris is the capital of France</p>
Inténtalo tú mismo »
Uso del atributo clase en JavaScript
JavaScript también puede utilizar el nombre de la clase para realizar determinadas tareas para elementos específicos.
JavaScript puede acceder a elementos con un nombre de clase específico con el método getElementsByClassName():
Ejemplo
Haga clic en un botón para ocultar todos los elementos con el nombre de la clase "city":
<script>
function myFunction() {
var x = document.getElementsByClassName("city");
for (var i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
}
</script>
Inténtalo tú mismo »
No se preocupe si no comprende el código del ejemplo anterior.
Aprenderás más sobre JavaScript en nuestro capítulo HTML JavaScript, o puedes estudiar nuestro Tutorial de JavaScript.
Resumen del capítulo
- El atributo HTML
classespecifica 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
classse puede utilizar en cualquier elemento HTML - El nombre de la clase distingue entre mayúsculas y minúsculas
- Diferentes elementos HTML pueden apuntar al mismo nombre de clase
- JavaScript puede acceder a elementos con un nombre de clase específico con el método
getElementsByClassName()
