05_cascade_specificity_and_inheritance
dz / mdn / css / 1_css_building_blocks / 05_cascade_specificity_and_inheritanceSummary
Cascade Specificity and Inheritance
Node Tree
-
cascade
- 3_factors
- conflicting_rules
- origin_cascade_layer_order_matter
- inheritance
- specificity
Nodes
cascade | |
content | cascade |
children | 3_factors, conflicting_rules (helps to determine), origin_cascade_layer_order_matter |
specificity | |
content | specificity |
children | algo_determine_applied_prop_val (description), conflicting_rules (helps to determine), inline_takes_precedence, lower_selectors_cant_overwrite_higher, measure_how_specific (description), specificity_factor, universal_comb_no_effect_specificity, value_in_points |
inheritance | |
content | inheritance |
children | inspect_inheritance_firefox_devtools, some_propvals_inherited, universal_prop_vals |
origin_cascade_layer_order_matter | |
content | Origin, cascade layer, origin of CSS rules matter |
children | effect_of_css_location |
parents | cascade |
algo_determine_applied_prop_val | |
content | Algorithm used to determine which propererty value is applied to an element |
parents | specificity |
conflicting_rules | |
content | Conflicting Rules |
parents | specificity, cascade |
universal_prop_vals | |
content | Universal Property Values for Controlling Inheritance |
children | all_shorthand, inherit, initial, origin_types, revert, revert_layer, unset |
parents | inheritance |
origin_types | |
content | Origin Types |
children | inherit, initial, revert, revert_layer, unset |
parents | universal_prop_vals |
inherit | |
content | Inherit |
parents | universal_prop_vals, origin_types |
initial | |
content | Initial |
parents | universal_prop_vals, origin_types |
revert | |
content | Revert |
parents | universal_prop_vals, origin_types |
revert_layer | |
content | Revert-layer |
parents | universal_prop_vals, origin_types |
unset | |
content | Unset |
parents | universal_prop_vals, origin_types |
measure_how_specific | |
content | Measure of how specific selection will be |
parents | specificity |
some_propvals_inherited | |
content | Some property values are in inherited, some aren't |
children | child_doesnt_inherit_width (example of property value not inherited), margin_padding_border_not_inherited (examples of not inherited) |
parents | inheritance |
child_doesnt_inherit_width | |
content | Child doesn't inherit width of 50% from parent |
children | margin_padding_border_not_inherited (other examples) |
parents | some_propvals_inherited |
margin_padding_border_not_inherited | |
content | Margin, padding, border, also not inherited |
parents | child_doesnt_inherit_width, some_propvals_inherited |
inspect_inheritance_firefox_devtools | |
content | Firefox devtools to inspect inheritance |
parents | inheritance |
all_shorthand | |
content | "all" shorthand property applies inheritance value to (almost) all properties |
parents | universal_prop_vals |
3_factors | |
content | 3 factors (in increasing order of importance) |
children | importance, source_order, specificity_factor |
parents | cascade |
source_order | |
content | source order |
children | specificity_factor (next) |
parents | 3_factors |
specificity_factor | |
content | specificity |
children | importance (next) |
parents | source_order, specificity, 3_factors |
importance | |
content | importance |
parents | 3_factors, specificity_factor |
universal_comb_no_effect_specificity | |
content | Universal combinators (+,>,~,") and specificity adjustment selector have no effect on specificity |
parents | specificity |
value_in_points | |
content | Value in points |
children | class_tens, element_ones, id_hundreds |
parents | specificity |
id_hundreds | |
content | ID (hundreds place) |
parents | value_in_points |
class_tens | |
content | CLASS (tens place) |
parents | value_in_points |
element_ones | |
content | ELEMENT (ones place) |
parents | value_in_points |
lower_selectors_cant_overwrite_higher | |
content | Lower specificity selectors can never overwrite higher specificity selectors |
parents | specificity |
inline_takes_precedence | |
content | Inline styles take precedence over all normal styles, no matter the specificity (1-0-0-0). |
children | important_overrides_inline |
parents | specificity |
important_overrides_inline | |
content | !important overrides inline |
parents | inline_takes_precedence |
remarks | Text says never to use this |
effect_of_css_location | |
content | Effect of CSS location |
children | order_of_cascade_layers, order_of_overriding_declarations |
parents | origin_cascade_layer_order_matter |
order_of_overriding_declarations | |
content | Order of overriding declarations |
children | author_stylesheet, author_stylesheet_important, scoping_proximity, user_agent_stylesheet, user_agent_stylesheet_important, user_stylesheet, user_stylesheet_important |
parents | effect_of_css_location |
user_agent_stylesheet | |
content | User-agent stylesheet |
children | user_stylesheet (next) |
parents | order_of_overriding_declarations |
user_stylesheet | |
content | User stylesheet |
children | author_stylesheet (next) |
parents | user_agent_stylesheet, order_of_overriding_declarations |
author_stylesheet | |
content | Author stylesheet |
children | author_stylesheet_important (next) |
parents | user_stylesheet, order_of_overriding_declarations |
author_stylesheet_important | |
content | Author Stylesheet (important) |
children | user_stylesheet_important (next) |
parents | order_of_overriding_declarations, author_stylesheet |
user_stylesheet_important | |
content | User stylesheet (important) |
children | user_agent_stylesheet_important (next) |
parents | author_stylesheet_important, order_of_overriding_declarations |
user_agent_stylesheet_important | |
content | User-agent stylesheet (important) |
parents | user_stylesheet_important, order_of_overriding_declarations |
scoping_proximity | |
content | Scoping proximity |
parents | order_of_overriding_declarations |
order_of_cascade_layers | |
content | Order of Cascade Layers |
parents | effect_of_css_location |