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. <br> 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í][1]][1] <br> **Caso 1.** Puedes añadir una clase específica, *como si fuera un id*. <br> 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; } <br> 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%; } <br> 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%; } <br> No debes usar !important, 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. Para evitar este problema al ordenar las clases, si sabes que estas estan ligadas a su uso en los elementos `.box` las nombras prefijandolas con esta clase: .box { background: pink; margin: 1% auto; padding: 5%; } .box-blue-box { background: blue !important; } <br> **Caso 2.** Sumar clases para aumentar la especificidad del elemento. <br> Es otra solución a el problema del caso anterior, en este caso indicas que un determinado estilo solo aplique al elemento que tiene las dos clases: .blue-box.box { background: blue; } .box { background: pink; margin: 1% auto; padding: 5%; } Y en el HTML irían las clases `box blue-box` en el elemento. Nos daría algo como: [![introducir la descripción de la imagen aquí][2]][2] El `background` de la clase definida más abajo (box) no le afecta, porque le has dado una mayor especificidad. <br> ***Nota:** fíjate que las clases van juntas en el CSS, si dejas un espacio en medio no funcionaría.* <br> Y hay más formas, CSS es muy extenso, pero están son seguramente las más comunes... <br>Sobre especificidad CSS: https://developer.mozilla.org/es/docs/Web/CSS/Especificidad [1]: https://i.sstatic.net/yRbAe.png [2]: https://i.sstatic.net/1cUUp.png