itemtype='https://schema.org/WebPage' itemscope='itemscope' class="page-template-default page page-id-1951 page-child parent-pageid-252 ast-desktop ast-separate-container ast-right-sidebar astra-4.6.14 ast-single-post ast-inherit-site-logo-transparent ast-hfb-header ast-normal-title-enabled">

36. El atributo class

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>

Nota: el atributo class se puede usar en cualquier elemento HTML. ¡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>
Scroll al inicio