mdn/css/1_css_building_blocks/05_cascade_specificity_and_inheritance

05_cascade_specificity_and_inheritance

dz / mdn / css / 1_css_building_blocks / 05_cascade_specificity_and_inheritance

Summary

Cascade Specificity and Inheritance

Node Tree

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