Se pueden aplicar múltiples clases a un solo elemento en HTML y se les puede aplicar estilo usando CSS. En este artículo, nos limitaremos a solo dos clases. Pero los conceptos utilizados en la asignación de dos clases también se pueden extender a varias clases.
Asignación de clases a un elemento en HTML:
Los nombres de las clases se pueden escribir dentro del atributo “clase” .
Nota: Los nombres de las clases deben estar separados por espacios.
Sintaxis:
<tag_name class="class_1 class_2">
Luego, las clases se pueden diseñar individualmente usando » .class_1 » y » .class_2 » o solo se puede diseñar ese elemento que contiene ambas clases usando » .class_1.class_2 «.
Estilo individual: Ambas clases en el siguiente ejemplo tienen estilo individualmente.
Sintaxis:
<style>
.class_1{
/* some styles */
}
.class_2{
/* some styles */
}
</style>
Ejemplo:
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>
How to apply two CSS classes
to a single element ?
</title>
<style>
.para {
font-size: larger;
margin-bottom: 35px;
background-color: lightgreen;
}
.second_para {
color: red;
}
</style>
</head>
<body>
<p class="para">
Hello there.
</p>
<p class="para second_para">
Welcome to GeeksForGeeks.
</p>
</body>
</html>
Producción:
En el ejemplo anterior, el estilo de la clase «para» se aplica a ambos párrafos, mientras que el estilo de la clase «segunda_clase» solo se aplica al segundo párrafo.
Aplicar estilo al elemento que contiene ambas clases: solo se aplicará estilo al elemento que contenga ambas clases. Todos los demás elementos que contengan una o ninguna de las dos clases no tendrán estilo.
Nota: en el selector de CSS, no hay espacio entre los nombres de las clases.
Sintaxis:
<style>
.class_1.class_2{
/* some styles */
}
</style>
Ejemplo:
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>
How to apply two CSS classes
to a single element?
</title>
<style>
.para.second {
font-size: larger;
margin-bottom: 35px;
margin-top: 35px;
background-color: lightgreen;
color: red;
}
</style>
</head>
<body>
<p class="para">
Hello there.
</p>
<p class="para second">
Welcome to GeeksForGeeks.
</p>
<p class="second">
Like our platform?
</p>
</body>
</html>
Producción:
En el ejemplo anterior, el estilo solo se aplica al segundo párrafo, ya que es la única etiqueta que contiene ambas clases.
Asignación de clases usando JavaScript: También podemos agregar y quitar clases usando JavaScript. Usaremos la propiedad «classList» de una etiqueta que devuelve los nombres de clase como un objeto DOMTokenList. Usaremos el método «add()» para agregar múltiples clases a un elemento dinámicamente.
add(class_1, class_2, …): Se utiliza para asignar una clase o varias clases a un elemento dentro de HTML.
En este ejemplo, asignaremos las clases «para» y «segundo» al párrafo con ID «to_be_styled». La técnica de peinado es la misma que la descrita anteriormente.
Ejemplo:
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>
How to apply two CSS classes
to a single element?
</title>
<style>
.para.second {
font-size: larger;
margin-bottom: 35px;
margin-top: 35px;
background-color: lightgreen;
color: red;
}
</style>
<script>
function myFunc() {
var element = document.getElementById(
"to_be_styled");
element.classList.add("para", "second");
}
</script>
</head>
<body>
<p>Hello there.</p>
<p id="to_be_styled">
Welcome to GeeksForGeeks.
</p>
<p>Like our platform?</p>
<button onclick="myFunc()">
Click Me to see Effects
</button>
</body>
</html>
Salida:
antes de hacer clic:
Después de hacer clic:
Navegador compatible:
- Google Chrome
- explorador de Internet
- Firefox
- Ópera
- Safari
Publicación traducida automáticamente
Artículo escrito por AnasShamoon y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA