MEJOR SITIO PARA DESARROLLADORES WEB
HTML5 Lecciones para principiantes

Ua En De

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 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 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 método getElementsByClassName()

HTML Ejercicios

Ponte a prueba con ejercicios

Ejercicio:

Crear un selector de clase llamado "special".

Agregue una propiedad de color con el valor "blue" dentro de la clase "special".

<!DOCTYPE html>
<html>
<head>
<style>

  ;

</style>
</head>
<body>

<p class="special">My paragraph</p>

</body>
</html>



Comentarios