Skip to main content
2 de 4
se añadieron 378 caracteres en el cuerpo
Orici
  • 7.8k
  • 13
  • 50
  • 89

Los identificadores no están recomendados para maquetar.

Hay varias estrategias para personalizar un elemento concreto parte de un conjunto que toman sus estilos en una clase determinada.


Por ejemplo, imagina que de una serie de cajas con texto una debe de tener un color de fondo diferente:

introducir la descripción de la imagen aquí


**Caso 1.** Puedes añadir una clase específica, *como si fuera un id*.
Voy a usar unos estilos comunes:
html {
    font-size: 12px;
    padding: 5%;
}
.box {
    background: pink;
    margin: 1% auto;
    padding: 5%;
}

y añadiré al final una clase específica:

.green-box {
    background: green;
}

Este es el HTML:
<body>
    <div class="box">Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum, molestiae nihil deleniti dolorem impedit quibusdam eaque deserunt maxime aspernatur!</div>

    <div class="box">Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum, molestiae nihil deleniti dolorem impedit quibusdam eaque deserunt maxime aspernatur!</div>

    <div class="box green-box">Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum, molestiae nihil deleniti dolorem impedit quibusdam eaque deserunt maxime aspernatur!</div>

    <div class="box">Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum, molestiae nihil deleniti dolorem impedit quibusdam eaque deserunt maxime aspernatur!</div>
</body>

Esto funciona aun si inviertes el orden de las clases en el HTML:

class="green-box box"

pero no si lo haces en el CSS:

.green-box {
    background: green;
}
.box {
    background: pink;
    margin: 1% auto;
    padding: 5%;
}

Los estilos se leen en cascada, de arriba abajo, el de abajo sobrescribe al anterior...
Orici
  • 7.8k
  • 13
  • 50
  • 89