I have this:
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
<title>My Social Network</title>
</head>
<body>
<div id="best_friend" class="friend" ></div>
<div class="family"></div>
<div class="enemy" id="archnemesis"></div>
</body>
</html>
div {
display: inline-block;
margin-left: 5px;
height: 100px;
width: 100px;
border-radius:100%;
border: 2px solid black;
}
#best_friend {
border: 4px solid #00C957;
}
.friend {
border: 2px dashed #008000;
}
.family {
border: 2px dashed #0000FF;
}
.enemy {
border: 2px dashed #FF0000;
}
#archnemesis {
border: 4px solid #CC0000;
}
My question is: Notice how I define border for both class and id. The border that is applied is the one coming from the id. Why so? Why is the border specification in id overriding the one in class.
The browser determines which styles to apply in what order based on Specificity, the higher number determines which will be applied.
Universal selectors have a specificity of 0,0,0,0.
* = 0
HTML selectors have a specificity of 1.
p, div, etc.. = 1 each
So each HTML selector adds to the specificity.
div p = 2, div p span = 3
Class selectors have a specificity of 10.
.class = 10
Class selectors combined with HTML selectors.
div p.class = 12
ID selectors have a specificity value of 100.
#id = 100
ID selectors combined with HTML selectors.
#id div = 101
!important overrides all other styles unless combined with another selector. table td {height: 50px !important;} Would override any height style applied to only a td within a table.
Inline styles have the highest specificity of 1000.
style= = 1000
CSS Specificity: Things You Should Know
Specificity | HTML Dog
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments