How CSS rules override
can be thought of as a duplicate for Typically CSS overrides another CSS rule , but in my markup
<div class="parent">
<div class="child">
this is content ...
</div>
</div>
and style sheet
div .child { deceleration }
.parent div { deceleration }
What causes
.parent div { deceleration }
override
div .child { deceleration }
as later, more specific, I think.
thank you in advance
source to share
According to CSS Cascading Order has a decision algorithm to find the application declaration in case of conflicts between all the selectors that match the element:
The top items in the list take precedence and precede the bottom ones
- Ads marked as '! important '
-
Ads in the author's stylesheet (provided by the site)
specificity = Concatenation of a and b and c with the following order and weights:
a = 100 * (number of identifier attributes in a selector)
b = 10 * (number of class (or pseudo-class) attributes in a selector)
c = 1 * (number of tag names (or pseudo-elements) in the selector)-
Higher specificity (first)
- Rules in the Master Style Sheet
With the same specificity:- Valid presence in style sheet / document
- Top presence in style sheet / document
- Rules in Imported Style Sheets
With the same specificity:- Valid presence in style sheet / document
- Top presence in style sheet / document
- Rules in the Master Style Sheet
-
Lower specificity (more)
- Rules in the Master Style Sheet
With the same specificity:- Valid presence in style sheet / document
- Top presence in style sheet / document
- Rules in Imported Style Sheets
With the same specificity:- Valid presence in style sheet / document
- Top presence in style sheet / document
- Rules in the Master Style Sheet
-
-
User style sheet declarations
[As part 2] - Declarations in the User-Agent Stylesheet (provided by the browser)
[As part of 2]
Note 1
style
Element attribute usage will equal the ID-based selector specified at the end of the stylesheet.
So:
<div id="myDiv" style="color:red">My content</div>
equally:
<div id="myDiv">My content</div>
#myDiv{ /* last line of stylesheet */
color:red
}
Note 2
Some HTML attributes are stylistic like
- ALIGN
- WIDTH HEIGHT
- HIDDEN
these attributes are translated into the corresponding CSS rules with a spec equal to 1, and are expected to be placed at the beginning of the author's style sheet
So:
<div id="myDiv" align="center">My content</div>
equally:
<div>My content</div>
div{ /* first line of stylesheet */
text-align:center
}
So to answer the question
This is due to insufficient presence
.parent div { deceleration }
and if you put it top like this
.parent div { deceleration }
div .child { deceleration }
then
div .child { deceleration }
...
source to share