Which CSS selector has priority?

Asked

Viewed 3,274 times

37

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 ?
  • 1

    I was stunned because div p didn’t leave pink. But much of that question has been answered here What is the priority of HTML? "id" or "class"?.

  • Because he ID is an POO (Object Oriented Programming).

  • I understand precedence, but in theory the more specific path should win.

  • 3

    ID and POO? What do you mean? @Kingrider

  • #element p is more specific than any div followed by p, so blue prevails over pink.

  • 1

    @Kingrider Could explain your comment better ?

  • I agree with you @Bacco, but in the others I have up to 3 selectors this would not be more specific ?

  • @Ricardomota But this element Id is an index is the first key, has no way to explain and there is computer information, has the various documentation W3C.

  • 1

    @Ricardomota added explanations to the answer, and a tool you might find interesting :)

Show 4 more comments

1 answer

53


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"?

  • Now it’s clear Bacco. Thank you very much.

  • I didn’t know it was calculated. Very good to know that.

  • 1

    Congratulations, one of the best explanations I’ve read :D+1

  • 1

    +1 Very well explained!

Browser other questions tagged

You are not signed in. Login or sign up in order to post.