En este artículo, aprenderemos cómo podemos aplicar estilos a varias clases a la vez. Puede aplicar el mismo estilo a diferentes clases a la vez de 2 maneras diferentes y vamos a ver estas dos cosas con ejemplos.
Enfoque 1: en este enfoque, vamos a tener varias declaraciones CSS para las mismas propiedades separándolas con comas.
Sintaxis:
.class_A , .class_B{
/*property*/
}
Ejemplo 1:
HTML
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: black;
color: white;
}
.abc,
.xyz {
color: green;
font-size: 50px;
}
</style>
</head>
<body>
<center>
<h1 class="color-fg-success"> GeeksforGeeks </h1>
<h3>How can I apply styles to multiple classes at once ?</h3>
<div class="abc">GeeksforGeeks</div>
<div class="xyz">GeeksforGeeks</div>
</center>
</body>
</html>
Producción:
Enfoque 2: en este enfoque, vamos a tener el nombre del elemento con el nombre de la clase unidos por un punto (.) Ejemplo: a.abc, a.pqr, a.xyz.
Sintaxis:
a.class_Name, a.class_Name, a.class_Name, {
/*property*/
}
Ejemplo 2:
HTML
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: black;
color: white;
}
div.abc,
div.xyz {
color: green;
font-size: 50px;
}
</style>
</head>
<body>
<center>
<h1 class="color-fg-success"> GeeksforGeeks </h1>
<h3>How can I apply styles to multiple classes at once ?</h3>
<div class="abc">GeeksforGeeks</div>
<div class="xyz">GeeksforGeeks</div>
</center>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por krishna_97 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA