Atributo class de HTML
El atributo class de HTML se utiliza para especificar uno o más nombres de clase para un elemento. Comúnmente, el atributo class apunta a una clase en una hoja de estilos. El nombre de la clase distingue entre mayúsculas y minúsculas.
Este atributo también puede ser utilizado por JavaScript a través del DOM de HTML para realizar ciertos cambios en los elementos HTML con un nombre de clase especificado.
En HTML5, puedes usar el atributo class para cualquier elemento HTML.
En HTML 4.01, el atributo class no se puede usar con los siguientes elementos: <head>, <html>, <base>, <basefont>, <param>, <style>, <meta>, <script> y <title>.
Aunque no hay requisitos específicos para el nombre de las clases, es mejor usar nombres que describan el propósito semántico del elemento y no su presentación. El nombre debe comenzar con una letra (a-z o A-Z), un guion (-) o un guion bajo (_), y puede ir seguido de letras, dígitos (0-9), guiones bajos y guiones.
Sintaxis
Sintaxis del atributo class de HTML
<tag class="classname"></tag>Ejemplo del atributo class de HTML:
Ejemplo del atributo class de HTML
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.red {
color: red;
}
.orange {
color: orange;
}
</style>
</head>
<body>
<h1>Example of the HTML class attribute</h1>
<p class="red">It is some red paragraph.</p>
<p>This is a some text.</p>
<p class="orange">It is some orange paragraph.</p>
</body>
</html>En CSS, si deseas seleccionar elementos con una clase específica, utiliza un punto (.) seguido del nombre de la clase.
Ejemplo del atributo class de HTML usado con CSS:
Ejemplo del atributo class de HTML usado con CSS
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.title {
background-color: #1c87c9;
color: #ffffff;
padding: 20px;
}
</style>
</head>
<body>
<h1>Example of the class attribute</h1>
<h2 class="title">Heading</h2>
<p>Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</p>
<h2 class="title">Heading</h2>
<p>Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</p>
</body>
</html>También puedes manipular el atributo class usando JavaScript. La propiedad classList proporciona métodos para agregar, eliminar o alternar clases dinámicamente.
Ejemplo del atributo class de HTML usado con JavaScript:
Ejemplo del atributo class de HTML con JavaScript
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.highlight {
background-color: yellow;
}
</style>
</head>
<body>
<p id="demo">Click the button to add a class.</p>
<button onclick="document.getElementById('demo').classList.add('highlight')">Add Class</button>
</body>
</html>Los elementos HTML también pueden tener más de un nombre de clase. Cada uno de ellos debe estar separado por un espacio.
Ejemplo del atributo class de HTML con múltiples nombres de clase:
Ejemplo del atributo class de HTML con algunos nombres de clase
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.title {
background-color: #202131;
color: #dddddd;
padding: 15px 25px;
}
.text-right {
text-align: right;
}
</style>
</head>
<body>
<h1>Example of multiple classes</h1>
<p>
Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</p>
<h2 class="title">London</h2>
<p>
Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</p>
<h2 class="title text-right">Paris</h2>
<p>
Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</p>
<h2 class="title">Tokyo</h2>
</body>
</html>Diferentes etiquetas, como <h2> y <p>, pueden tener el mismo nombre de clase y el mismo estilo.
Ejemplo del atributo class de HTML con los elementos <h2> y <p>:
Ejemplo del atributo class de HTML
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.grey-text {
color: #808080;
}
</style>
</head>
<body>
<h1>Example of the class attribute </h1>
<h2 class="grey-text">Heading</h2>
<p class="grey-text">
Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</p>
</body>
</html>Práctica
¿Cuál es el propósito del atributo class en HTML?