mdn/css/1_css_building_blocks/06_cascade_layers

06_cascade_layers

dz / mdn / css / 1_css_building_blocks / 06_cascade_layers

Summary

Cascade Layers

Node Tree

Nodes

cascade_layers
content Cascade Layers
children builds_on_cascade_specificity, cascade_layer_precedence, cascade_precedence_order, creating_cascade_layers, explicit_specificity_containers, most_relevant_when, nested_cascade_layers, precedence, precedence_order_nested_cascade_layer

builds_on_cascade_specificity
content Builds on Cascade and Specificity
parents cascade_layers

most_relevant_when
content Most relevant when importing from multiple sources when there are conflicting seletors and competing specificities
parents cascade_layers

explicit_specificity_containers
content Explicit Specificity Containers
children simpler_greater_control_declarations
parents cascade_layers

simpler_greater_control_declarations
content Simpler and greater control over CSS declarations that get applied
parents explicit_specificity_containers

cascade_review
content Cascade Review
children cascade_origin_types, levels_of_precedence, steps_user_agent_runs_through, winning_declaration

steps_user_agent_runs_through
content Steps the user-agent runs through
children clearly_defined_steps
parents cascade_review

clearly_defined_steps
content Relevance, importance, origin, cascade layers, specificity
children cascade_layer_precedence (focusing on "cascade layer" element)
parents steps_user_agent_runs_through

levels_of_precedence
content Levels of precedence
children styles_levels_of_precedence_list
parents cascade_review

styles_levels_of_precedence_list
content User-agent normal, user normal, author normal, animated, author important, user important, user-agent important, transitioned
children cascade_origin_types (elaboration on terminology in list)
parents levels_of_precedence

cascade_origin_types
content Cascade Origin Types
children cascade_origin_types_list
parents cascade_review, styles_levels_of_precedence_list

cascade_origin_types_list
content User-agent, user, and author stylesheets
children user, user_agent, author
parents cascade_origin_types

user_agent
content User agent: browser
parents cascade_origin_types_list

author
content Author: you (developer)
parents cascade_origin_types_list

user
content User: Site visitor
parents cascade_origin_types_list

winning_declaration
content For each property, declaration that "wins" is one from the origin with precedence based on the weight (normal/important)
children origin_highest_precedence
parents cascade_review

origin_highest_precedence
content Value from origin with highest precedence applied
children precedence_over_specificity, winning_origin_multiple_declarations
parents winning_declaration

winning_origin_multiple_declarations
content Winning origin more than one property declaration for element?
children compare_specificity
parents origin_highest_precedence

compare_specificity
content Compare specificity for competing values
parents winning_origin_multiple_declarations

precedence_over_specificity
content Origin precedence always wins over selector specificity
parents origin_highest_precedence

cascade_layer_precedence
content Cascade Layer Precedence
children order_sets_precedence, suborigin_priority, unlayered_important_styles_cascade
parents cascade_layers, clearly_defined_steps

suborigin_priority
content Sub-origin level of priority within an origin
parents cascade_layer_precedence

unlayered_important_styles_cascade
content Unlayered important styles cascade together into implicit layer, precedence over non-transitioning normal styles
parents cascade_layer_precedence

order_sets_precedence
content Order of layer creation sets precedence among layers within origin.
parents cascade_layer_precedence

nested_cascade_layers
content Nested Cascade Layers
children created_same_as_regular
parents cascade_layers

creating_cascade_layers
content Creating Cascade Layers
children import_at_rule, layer_at_rule, layer_creation_media_feature_queries
parents cascade_layers

layer_at_rule
content @layer
parents creating_cascade_layers

import_at_rule
content @import
children defined_before_CSS_styles, import_create_layers_media_feature_queries, import_stylesheet_into_layer, layer_keyword_or_layer_func, preceded_by_charset, statement, block
parents creating_cascade_layers

layer_keyword_or_layer_func
content Layer keyword or layer() function
children assigns_file_contents_to_layer
parents import_at_rule

statement
content statement
children creates_layers_no_style
parents import_at_rule

block
content block
children create_anonymous_layers, styles_within_added_to_layer
parents import_at_rule

creates_layers_no_style
content Creates (named) layers without assigning any styles
children define_layer_order
parents statement

styles_within_added_to_layer
content Styles with block added to named/unnamed layer
parents block

define_layer_order
content Can be used to define layer order
parents creates_layers_no_style

assigns_file_contents_to_layer
content Assigns imported file contents into that layer
parents layer_keyword_or_layer_func

create_anonymous_layers
content Used to create anonymous layers
children styles_added_to_anon_layer_creation_time
parents block

normal_unlayered_over_layered
content Normal unlayered takes precedence over layered
parents cascade_precedence_order

cascade_precedence_order
content Cascade Precedence Order
children normal_unlayered_over_layered
parents cascade_layers

styles_added_to_anon_layer_creation_time
content Styles can only be added to an anonymous layer at the time of its creation
parents create_anonymous_layers

layer_creation_media_feature_queries
content Layer creation with media queries and feature queries
children layer_not_created_no_match_unsupported_feature
parents creating_cascade_layers

layer_not_created_no_match_unsupported_feature
content No layer is creatred if media is not a match or feature not supported
parents layer_creation_media_feature_queries

defined_before_CSS_styles
content must be defined before any CSS styles within stylesheet or <style> block
parents import_at_rule

preceded_by_charset
content Can be preceded by a @charset rule
parents import_at_rule

import_stylesheet_into_layer
content Import stylesheet into named layer, nested layer, or anonymous layer
children import_multiple_into_layer
parents import_at_rule

import_multiple_into_layer
content import more than one CSS file into a single layer
parents import_stylesheet_into_layer

import_create_layers_media_feature_queries
content Import/create layers based on media queries and feature queries (conditional)
parents import_at_rule

created_same_as_regular
content Can be created same as regular layers
children layer_at_rule_dot_notation
parents nested_cascade_layers

layer_at_rule_dot_notation
content @layer using dot noation
parents created_same_as_regular

multiple_dots_names_multiple_nesting
content Multiple dots and layer names signifies multiple layer_at_rule_dot_notation

precedence
content Precedence
children important_order_precedence_reversed, normal_styles_lowest
parents cascade_layers

normal_styles_lowest
content normal styles lowest priority
children styles_declared_outside_layers (next)
parents precedence

styles_declared_outside_layers
content Styles declared outside of layers
children inline_style_attr (next)
parents normal_styles_lowest

inline_style_attr
content Inline styles declared using style attribute
children animating_styles (next)
parents styles_declared_outside_layers

animating_styles
content Animating Styles
children important (next)
parents inline_style_attr

important
content !important
children important_order_precedence_reversed, inline_important (next)
parents animating_styles

inline_important
content Inline Important
children important_order_precedence_reversed, transitioning_styles
parents important

transitioning_styles
content Transitioning Styles
parents inline_important

important_order_precedence_reversed
content Order of precedence reversed for important styles
parents important, inline_important, precedence

precedence_order_nested_cascade_layer
content Precedence order of nested cascade layers
children based_on_order_nested_creation
parents cascade_layers

based_on_order_nested_creation
content Based on order of nested creation
parents precedence_order_nested_cascade_layer