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 within
style=""
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"?
I was stunned because
div p
didn’t leavepink
. But much of that question has been answered here What is the priority of HTML? "id" or "class"?.– William Novak
Because he ID is an POO (Object Oriented Programming).
– KingRider
I understand precedence, but in theory the more specific path should win.
– Ricardo Mota
ID and POO? What do you mean? @Kingrider
– Wallace Maxters
#element p
is more specific than any div followed by p, so blue prevails over pink.– Bacco
@Kingrider Could explain your comment better ?
– Ricardo Mota
I agree with you @Bacco, but in the others I have up to 3 selectors this would not be more specific ?
– Ricardo Mota
@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.
– KingRider
@Ricardomota added explanations to the answer, and a tool you might find interesting :)
– Bacco