CSS La regla importante
¿Lo que es importante?
La !importantregla en CSS se usa para agregar más importancia a una propiedad/valor de lo normal.
De hecho, si usa la !importantregla, anulará TODAS las reglas de estilo anteriores para esa propiedad específica en ese elemento.
Veamos un ejemplo:
Ejemplo
#myid {
background-color: blue;
}
.myclass {
background-color: gray;
}
p {
background-color: red !important;
}
Ejemplo explicado
En el ejemplo anterior. los tres párrafos tendrán un color de fondo rojo, aunque el selector de ID y el selector de clase tienen una mayor especificidad. La !importantregla anula la
background-colorpropiedad en ambos casos.
Importante Acerca de !importante
La única forma de anular una !important
regla es incluir otra !important
regla en una declaración con la misma (o mayor) especificidad en el código fuente, ¡y aquí comienza el problema! Esto hace que el código CSS sea confuso y la depuración será difícil, ¡especialmente si tiene una hoja de estilo grande!
Aquí hemos creado un ejemplo simple. No está muy claro, cuando observa el código fuente CSS, qué color se considera más importante:
Ejemplo
#myid {
background-color: blue !important;
}
.myclass {
background-color: gray !important;
}
p {
background-color: red !important;
}
Sugerencia: es bueno conocer la !important
regla, es posible que la vea en algún código fuente CSS. Sin embargo, no lo use a menos que sea absolutamente necesario.
Tal vez uno o dos usos justos de !important
Una forma de usarlo !importantes si tiene que anular un estilo que no se puede anular de ninguna otra manera. Esto podría ser si está trabajando en un Sistema de gestión de contenido (CMS) y no puede editar el código CSS. Luego puede configurar algunos estilos personalizados para anular algunos de los estilos CMS.
Otra forma de uso !importantes: suponga que desea un aspecto especial para todos los botones de una página. Aquí, los botones tienen un estilo con un color de fondo gris, texto blanco y algo de relleno y borde:
Ejemplo
.button {
background-color: #8c8c8c;
color: white;
padding: 5px;
border: 1px solid black;
}
El aspecto de un botón a veces puede cambiar si lo colocamos dentro de otro elemento con mayor especificidad y las propiedades entran en conflicto. Aquí hay un ejemplo de esto:
Ejemplo
.button {
background-color: #8c8c8c;
color: white;
padding: 5px;
border: 1px solid black;
}
#myDiv a {
color: red;
background-color: yellow;
}
Para "forzar" que todos los botones tengan el mismo aspecto, pase lo que pase, podemos agregar la !important
regla a las propiedades del botón, así:
Ejemplo
.button {
background-color: #8c8c8c !important;
color: white
!important;
padding: 5px !important;
border: 1px solid black !important;
}
#myDiv a {
color: red;
background-color: yellow;
}