CSS cascading and specificity

    Likely, many people who are involved in typesetting and came up with tight stylesheets had moments when! Important was sitting on! Important'e, css turned into a string of long chains, but still someone, somewhere, someone then interrupted (or vice versa). And it is not clear why this is happening.

    Let's deal with the cascading of styles and the specificity of selectors once and for all.

    The specificity of selectors determines their priority in the style sheet. The more specific the selector, the higher its priority.
    Counting selector priority is very simple.

    • inline styles have a specificity of 1000
    • for each identifier (#) 0100
    • for each class (.) and pseudo-class (::, []) 0010
    • for each tag and pseudo-element 0001
    • * and browser styles 0000

    * {box-sizing: border-box} /* специфичность 0000 */
    li {color:red} /* специфичность 0001*/
    ul li {color:red} /* специфичность 0002*/
    .list li {color:red} /* специфичность 0011*/
    #list li {color:red} /* специфичность 0101*/
    a[href^="http://"] {text-decoration: underline} /* специфичность 0011 */
    

    When adding ! Important, priority becomes dominant. If! Important is a little worth thinking about changing the profession, they begin to obey the same rules.

    li {color:red !imporatnt} /* специфичность 0001 - win*/
    ul li {color:red} /* специфичность 0002*/
    

    li {color:red !imporatnt} /* специфичность 0001*/
    ul li {color:red !imporatnt} /* специфичность 0002 - win*/
    


    After all the manipulations, the specificity coincided - the last (below) rule wins.

    And of course, CSS animations that have a higher priority, even than! Important in inline styles.

    UPD Why 11 classes do not have a higher priority over the identifier read here

    Also popular now: