La regla !important en CSS se utiliza para agregar más importancia a una propiedad/valor de lo normal.
De hecho, si usa la regla !important, anulará TODAS las reglas de estilo anteriores para esa propiedad específica en ese elemento!
Veamos un ejemplo:
#myid {
background-color: blue;
}
.myclass {
background-color: gray;
}
p {
background-color: red !important;
}Pruébelo usted mismo →
<!DOCTYPE html>
<html>
<head>
<style>
#myid {
background-color: blue;
}
.myclass {
background-color: gray;
}
p {
background-color: red !important;
}
</style>
</head>
<body>
<p>This is some text in a paragraph.</p>
<p class="myclass">This is some text in a paragraph.</p>
<p id="myid">This is some text in a paragraph.</p>
</body>
</html>
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 regla !important anula la propiedad background-color en ambos casos.
La única forma de anular un !important La regla es incluir otro !important regla sobre 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 ¡Tienes una hoja de estilo grande!
Aquí hemos creado un ejemplo sencillo. No está muy claro, cuando miras el código fuente CSS, qué color se considera más importante:
#myid {
background-color: blue !important;
}
.myclass {
background-color: gray !important;
}
p {
background-color: red !important;
}Pruébelo usted mismo →
<!DOCTYPE html>
<html>
<head>
<style>
#myid {
background-color: blue !important;
}
.myclass {
background-color: gray !important;
}
p {
background-color: red !important;
}
</style>
</head>
<body>
<p>This is some text in a paragraph.</p>
<p class="myclass">This is some text in a paragraph.</p>
<p id="myid">This is some text in a paragraph.</p>
</body>
</html>
Consejo: ¡Es bueno conocer el !important regla. Es posible que lo veas en algún código fuente CSS. Sin embargo, no lo utilices a menos que sea absolutamente necesario.
Una forma de utilizar !important es si tiene que anular un estilo que no se puede anular de ninguna otra manera. Esto podría ser si eres trabajando en un sistema de gestión de contenidos (CMS) y no puede editar el código CSS. Luego, puede configurar algunos estilos personalizados para anular algunos de los estilos del CMS.
Otra forma de utilizar !important es: Supongamos que Quiere un aspecto especial para todos los botones de una página. Aquí, los botones tienen un estilo gris. color de fondo, texto blanco y algo de relleno y borde:
.button {
background-color: #8c8c8c;
color: white;
padding: 5px;
border: 1px solid black;
}Pruébelo usted mismo →
<!DOCTYPE html>
<html>
<head>
<style>
.button {
background-color: #8c8c8c;
color: white;
padding: 5px;
border: 1px solid black;
}
</style>
</head>
<body>
<p>Standard button: <a class="button" href="default.asp">CSS Tutorial</a></p>
<p>Standard button: <a class="button" href="/html/">HTML Tutorial</a></p>
</body>
</html>
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:
.button {
background-color: #8c8c8c;
color: white;
padding: 5px;
border: 1px solid black;
}
#myDiv a {
color: red;
background-color: yellow;
}Pruébelo usted mismo →
<!DOCTYPE html>
<html>
<head>
<style>
.button {
background-color: #8c8c8c;
color: white;
padding: 5px;
border: 1px solid black;
}
#myDiv a {
color: red;
background-color: yellow;
}
</style>
</head>
<body>
<p>Standard button: <a class="button" href="default.asp">CSS Tutorial</a></p>
<div id="myDiv">
<p>A link text inside myDiv: <a href="/html/">HTML Tutorial</a></p>
<p>A link button inside myDiv: <a href="/html/" class="button">HTML Tutorial</a></p>
</div>
</body>
</html>
Para "forzar" que todos los botones tengan el mismo aspecto, pase lo que pase, podemos agregar el !important regla a las propiedades del botón, así:
.button {
background-color: #8c8c8c !important;
color: white
!important;
padding: 5px !important;
border: 1px solid black !important;
}
#myDiv a {
color: red;
background-color: yellow;
}Pruébelo usted mismo →
<!DOCTYPE html>
<html>
<head>
<style>
.button {
background-color: #8c8c8c !important;
color: white !important;
padding: 5px !important;
border: 1px solid black !important;
}
#myDiv a {
color: red;
background-color: yellow;
}
</style>
</head>
<body>
<p>Standard button: <a class="button" href="default.asp">CSS Tutorial</a></p>
<div id="myDiv">
<p>A link text inside myDiv: <a href="/html/">HTML Tutorial</a></p>
<p>A link button inside myDiv: <a href="/html/" class="button">HTML Tutorial</a></p>
</div>
</body>
</html>