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:
**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...
En el caso anterior, todo bien. Nueva norma, mas bien una recomendación: organizar los estilos alfabéticamente... y ahí tenemos un problema con ciertos nombres, por ejemplo: blue-box
iría antes que box
, y esta última machaca el color de la anterior... vamos al uso de !important
.
Si usar ids para maquetar, usar !important
es aún más feo y aunque lo siguiente funciona:
.blue-box {
background: blue !important;
}
.box {
background: pink;
margin: 1% auto;
padding: 5%;
}
No debes usarlo, aunque puede ser necesario para sobrescribir estilos de *bootstrap*, maquetados heredados y cosas así... Usos muy concretos, para los que se pueden crear clases como:
.bg-blue {
background: blue !important;
}
.bg-green {
background: green !important;
}
Que de estar presentes sobrescriben el fondo del elemento.
Sobre especificidad CSS:
https://developer.mozilla.org/es/docs/Web/CSS/Especificidad