Which css selector has priority?

Question

Which css selector has priority?

Navigation

#1 by (40 votes)

29

My question is very objective. Regarding css selectors.
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 a related question , but in this case I'm dealing with a series of selectors, not just classe and id .

Why does the style of the id selector apply? Why does id have priority over other so many selectors, since others come after it? In the last style line I have a path with 3 selectors and even though id has priority, why?

html css css3 seletores

asked by anonymous 01.08.2016 / 19:27

1 answer

When to use self vs $ this in PHP? What good practice when throwing exception within if?

score 40 · Accepted Answer

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

link

Specificity is calculated as follows:

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

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

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

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

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 simple selector, and increase specificity.
The declaration within style="" is considered as 1-0-0-0 for calculation purposes, being more specific than the CSS of the id of the element, for example.
Using !important after a setting has priority over all other statements (if you have more than !important , the tiebreaker follows the rules already mentioned)
If !important is applied to a shortcut as background: , it is 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 */

Online calculation tool:

link