Atributo de clase HTML
El atributo HTML classse utiliza para especificar una clase para un elemento HTML.
Múltiples elementos HTML pueden compartir la misma clase.
Usando el atributo de clase
El classatributo 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 <div>elementos con un classatributo con el valor de "ciudad". Los tres <div>
elementos tendrán el mismo estilo de acuerdo con la .city
definición de estilo en la sección principal:
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>
En el siguiente ejemplo tenemos dos <span>elementos con un classatributo con el valor de "nota". Ambos <span>
elementos tendrán el mismo estilo de acuerdo con la .note
definición de estilo 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>
Sugerencia: el classatributo se puede usar 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 de CSS .
La sintaxis para la clase
Para crear una clase; escriba un carácter de punto (.), seguido de un nombre de clase. Luego, defina las propiedades CSS entre llaves {}:
Ejemplo
Cree una clase llamada "ciudad":
<!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, separe los nombres de las clases con un espacio, por ejemplo, <div class="city main">. El elemento se diseñará de acuerdo con todas las clases especificadas.
En el siguiente ejemplo, el primer <h2>elemento pertenece tanto a la
cityclase como a la mainclase, 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>
Diferentes elementos pueden compartir la misma clase
Diferentes elementos HTML pueden apuntar al mismo nombre de clase.
En el siguiente ejemplo, ambos <h2>y <p>
apuntan a la clase "ciudad" y compartirán el mismo estilo:
Ejemplo
<h2 class="city">Paris</h2>
<p
class="city">Paris is the capital of France</p>
Uso del atributo de clase 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 getElementsByClassName()método:
Ejemplo
Haga clic en un botón para ocultar todos los elementos con el nombre de clase "ciudad":
<script>
function myFunction() {
var x = document.getElementsByClassName("city");
for (var i = 0; i < x.length;
i++) {
x[i].style.display = "none";
}
}
</script>
No se preocupe si no entiende el código del ejemplo anterior.
Aprenderá más sobre JavaScript en nuestro capítulo JavaScript HTML , o puede 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
classatributo se 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
getElementsByClassName()método