Skip to main content
Extiendo respuesta
Origen Enlace
Orici
  • 7.8k
  • 13
  • 50
  • 89
usarlousar!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;
}

**Caso 2.** Sumar clases para aumentar la especificidad del elemento.
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í

El background de la clase definida más abajo (box) no le afecta, porque le has dado una mayor especificidad.


***Nota:** fíjate que las clases van juntas en el CSS, si dejas un espacio en medio no funcionaría.*
Y hay más formas, CSS es muy extenso, pero están son seguramente las más comunes...
usarlo

Que de estar presentes sobrescriben el fondo del elemento.

usar!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;
}

**Caso 2.** Sumar clases para aumentar la especificidad del elemento.
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í

El background de la clase definida más abajo (box) no le afecta, porque le has dado una mayor especificidad.


***Nota:** fíjate que las clases van juntas en el CSS, si dejas un espacio en medio no funcionaría.*
Y hay más formas, CSS es muy extenso, pero están son seguramente las más comunes...
se añadieron 378 caracteres en el cuerpo
Origen Enlace
Orici
  • 7.8k
  • 13
  • 50
  • 89

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

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

se añadieron 378 caracteres en el cuerpo
Origen Enlace
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...

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>

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...
Origen Enlace
Orici
  • 7.8k
  • 13
  • 50
  • 89
Loading