Which attribute applies if both element and class are specified for the element, and why?
I have it:
<!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: Notice how I define border
for class
and id
. The used one border
is the one that comes from id
. Why is that? Why is the specification border
in the id
overrides in class
.
source to share
The browser determines which styles to apply in which order based on Specificity , the higher number determines which ones to apply.
Universal selectors have a specificity of 0,0,0,0. *
= 0
HTML selectors have a specificity of 1. p
, div
etc. = 1 each
Thus, each HTML selector adds specificity. div p
= 2 , div p span
= 3
Class selectors have 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;}
Will override any style height
applied only to td
within table
.
Inline styles have the highest specificity 1000. style=
= 1000
Useful Resources
CSS Specificity: Things You Should Know
Specificity | HTML Dog
source to share
Without the inclusion of exceptions (for example :not
, !important
) the following list of types of selectors - this increase in specificity:
- Universal selectors (like *) ( lowest )
- Type selector (e.g. h1)
- Class selector (like example)
- Attribute selectors (for example, [type = "radio"])
- Pseudo-classes (e.g.: hover)
- ID selectors (e.g. # example)
- Inline style (eg style = "font-weight: bold") ( highest )
Link: https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
The applied boundary is the one that comes from the identifier. Why is that? Why does the specification of border in id override class in class.
From this list, you can see which is id
higher than class
, so the border set in id
.
source to share
For css
the following rules apply:1.) When more than one overlapping styles are applied to the same element, only the last style is displayed
2.) When an attribute is used !important
, it has the highest priority
3.) The style that has the highest CSS specification is used. The specificity of the various elements is determined as follows:
Attribute ID = 100
Class Attribute = 10
Element = 1
Refer this link
source to share
BOM hierarchy
Each selector has its own place in the specification hierarchy. There are four different categories that determine the level of specificity of a given selector:
- Inline styles (the presence of a style in the document). The inline style lives in your XHTML document. It attaches directly to the style to be styled. For example.
<h1 style="color: #fff;">
- IDs (# of IDs) ID is the ID of your page elements eg
#div
. - Classes, attributes and pseudo-classes (# of class selectors). This group also includes
.classes, [attributes]
pseudo-classes such as:hover, :focus
, etc. - Elements and pseudo-elements (element selector (type)). Including, for example,
:before
and:after
.
Link: http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/
and here: http://fourword.fourkitchens.com/article/css-specificity-id-overrides
source to share