Which CSS selector has priority?

Question

I have the following code HTML and CSS:

#element    p{color:blue;}
.element    p{color:red;}
div         p{color:pink;}
div.element p{color:yellow;}
div[name="element"] p{color:purple;}
div p:first-child{color:brown;}
div p:nth-child(1){color:white;}

<div class="element" id="element" name="element">
     <p>Elemento</p>
</div>

I know there’s already one related question, but in this case I’m dealing with a series of selectors, and not only classe and id.

• Why is applied selector style id ?
• Because the id has priority over others so many selectors, since the rest comes after him ?
• In the last line of style I have a way with 3 selectors and yet the id has priority, because ?

Answer 1

Basically, the rule followed is that of "specificity":

https://www.w3.org/TR/css3-selectors/#specificity

Specificity is calculated as follows::

• The universal dial * is ignored.
• a = number of Ids in each selector;
• b = number of class, attribute and pseudoclass selectors;
• c = number of type selectors and pseudoelements;
• inline styles (style="") has more priority than the 3 conditions above.

Using the values a-b-c you get the rating index (is worth the highest):

  ┌── maior especificidade   
┌─┴─┐
1-0-3 > 0-14-5 > 0-2-1 > 0-0-12 
                         └─┬──┘
    menor especificidade ──┘

When the indexes are equal, the last one defined in the CSS prevails, respecting the "cascade".

Examples:

*               /* a=0 b=0 c=0 -> especificidade =       0 */
LI              /* a=0 b=0 c=1 -> especificidade =       1 */
UL LI           /* a=0 b=0 c=2 -> especificidade =       2 */
UL OL+LI        /* a=0 b=0 c=3 -> especificidade =       3 */
H1 + *[REL=up]  /* a=0 b=1 c=1 -> especificidade =     1-1 */
UL OL LI.red    /* a=0 b=1 c=3 -> especificidade =     1-3 */
LI.red.level    /* a=0 b=2 c=1 -> especificidade =     2-1 */
#x34y           /* a=1 b=0 c=0 -> especificidade =   1-0-0 */
#s12:not(FOO)   /* a=1 b=0 c=1 -> especificidade =   1-0-1 */
style="..."     /* a=0 b=0 c=0 -> especificidade = 1-0-0-0 */

Notes:

• it is allowed to repeat the same single selector, and increase the specificity.
• the statement withinstyle="" is considered as 1-0-0-0 for calculation purposes, being more specific than the CSS of id of the element, for example.
• use !important after a definition has priority over all other statements (if you have more than one !important, the tie-breaker criterion follows the rules already mentioned)
• if the !important is applied in a shortcut like background:, as if it had been applied to all sub-items of the shortcut (background-color, background-position etc.)

Applied to your case:

#element    p{color:blue;}                /* 1-0-1 */
.element    p{color:red;}                 /*   1-1 */
div         p{color:pink;}                /*     2 */
div.element p{color:yellow;}              /*   1-2 */
div[name="element"] p{color:purple;}      /*   1-2 */
div p:first-child{color:brown;}           /*   1-2 */
div p:nth-child(1){color:white;}          /*   1-2 */

Tool for online calculation:

http://specificity.keegan.st/

See also:

What is the HTML priority? "id" or "class"?