2

estaba estudiando el tema de la cascada en CSS, y hay un par de cosas que no me quedaron claras acerca de cuando un selector aplica sus estilos con respecto a otro dependiendo de su importancia establecida.

Estuve leyendo las siguientes puntuaciones:

introducir la descripción de la imagen aquí

Segun lo que entendi con respecto a las dos ultimas es que los elementos cuyas propiedades en la hoja de estilos del navegador tengan !important sobreescribiran a las escritas por el desarrollador aunque estas tengan !important.

Aqui me parecio que no tuvo mucho sentido lo que entendi porque si yo tengo un selector de elemento con una propiedad con !important y el navegador tiene esa misma propiedad con !important con el mismo selector, no se supone que mi declaracion ganaria al estar escrita de ultimo con respecto a la otra propiedad?

En ese caso los estilos !important del navegador quedarian sobreescritos con mis estilos con !important. o sera que estoy entendiendo mal la manera en que me lo detallaron en esa lista. Segun lo que entendi de esa jerarquia descrita en esa lista es que los estilos !important del navegador sobreescriben los !important del autor, sin embargo los !important del autor siempre ganarian por estar declarados de ultimo en el caso de que ambos elementos tengan el mismo nivel de especificidad teniendo una regla con !important.

Alguien podria ayudarme a entender bien esto?

1 respuesta 1

2

Con respecto al uso de !important podemos consultar la definición de la W3C que dice y cito:

CSS attempts to create a balance of power between author and user style sheets. By default, rules in an author's style sheet override those in a user's style sheet (see cascade rule 3).

However, for balance, an "!important" declaration (the delimiter token "!" and keyword "important" follow the declaration) takes precedence over a normal declaration. Both author and user style sheets may contain "!important" declarations, and user "!important" rules override author "!important" rules. This CSS feature improves accessibility of documents by giving users with special requirements (large fonts, color combinations, etc.) control over presentation.

Que se pudiera traducir como

CSS intenta crear un balance de poder entre las hojas de estilo del autor y del usuario. Por defecto, las reglas en la hoja de estilos del autor sobre escribe aquellas en la hoja de estilos del usuario

Sin embargo, por balance, una declaración de !important (el token delimitador "!" y la palabra clave "important" sigue a la declaración) toma precedencia sobre una declaración normal. Ambas hojas de estilo autor y usuario pueden contener declaraciones "!important" y las reglas de "!important" del usuario sobre escriben a las reglas "!important" del autor. Esta característica de CSS mejora la accesibilidad de los documentos brindando a los usuarios con necesidades especiales(fuentes amplias, combinaciones de color, etc) control sobre presentación

Entonces partimos de que los estilos se aplican en cascada, es decir de arriba hacia abajo según son declarados

Ejemplo 1.

Declaro una etiqueta párrafo que será de color azul el texto por que en el CSS mi segunda declaración establece dicho color aunque tengo otra que lo debería poner rojo al inicio

    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width">
      <title>Ejemplo</title>
      <style>
        p{
          color: red;
        }
        p{
          color: blue;
        }
      </style>
    </head>
    <body>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique esse ratione quae cupiditate eligendi maxime excepturi animi velit, quos vel exercitationem est soluta tenetur ex labore consequuntur assumenda! Quae, asperiores!</p>
    </body>
    </html>

Ejemplo 2.

Sin embargo ahora haciendo uso de la regla !important sobre escribiré la regla anterior, indicando que tome la primer regla CSS para poner el texto en rojo a pesar de que debería tomar el azul pues en la declaración es la última regla CSS escrita

    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width">
      <title>JS Bin</title>
      <style>
        p{
          color: red !important;
        }
        p{
          color: blue;
        }
      </style>
    </head>
    <body>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique esse ratione quae cupiditate eligendi maxime excepturi animi velit, quos vel exercitationem est soluta tenetur ex labore consequuntur assumenda! Quae, asperiores!</p>
    </body>
    </html>

Ejemplo 3.

Sin embargo veamos ahora lo siguiente, declaro para la misma etiqueta 4 colores de texto distintos; en este orden:

  • con !important
  • sin !important
  • con !important
  • con !important

Aunque pudieramos pensar que debería tomar el primero pues se le esta indicando que sobre escriba al resto de estilos, el texto finalmente tendrá el color de la última regla; por que inicia a leer las reglas y aplica la primera por la regla ya mencionada, posterior lee la segunda pero no la aplica por la importancia de la anterior, sigue leyendo y aplica la tercera pues nuevamente tiene la regla de importancia y termina leyendo la última regla que es la que sobre escribirá y quedará al final pues aunque es la última tiene la regla de !important

    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width">
      <title>Ejemplo</title>
      <style>
        p{
          color: red !important;
        }
        p{
          color: blue;
        }
        p{
          color: green !important;
        }
        p{
          color: steelblue !important;
        }
      </style>
    </head>
    <body>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique esse ratione quae cupiditate eligendi maxime excepturi animi velit, quos vel exercitationem est soluta tenetur ex labore consequuntur assumenda! Quae, asperiores!</p>
    </body>
    </html> 

Referencia

1
  • ¿Entonces el !important de la hoja de estilos del usuario es especial, aunque la especificidad del selector dentro del cual tengo la propiedad con important sea mayor a la del selector en donde se aplica la propiedad en la hoja de estilos del usuario, esta siempre terminara ganando y se aplicara esa propiedad en vez de la que esta dentro de mi regla?
    – Unknow
    el 13 may. 2019 a las 2:50

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.