diff --git a/files/en-us/_redirects.txt b/files/en-us/_redirects.txt index 0ac19ba7bd08d74..447037c1d945623 100644 --- a/files/en-us/_redirects.txt +++ b/files/en-us/_redirects.txt @@ -469,7 +469,7 @@ /en-US/docs/CSS/CSS_transitions /en-US/docs/Web/CSS/CSS_transitions/Using_CSS_transitions /en-US/docs/CSS/CSS_values_serialization /en-US/docs/Web/CSS /en-US/docs/CSS/CSS_values_syntax /en-US/docs/Web/CSS -/en-US/docs/CSS/Cascade /en-US/docs/Web/CSS/Cascade +/en-US/docs/CSS/Cascade /en-US/docs/Web/CSS/CSS_cascade/Cascade /en-US/docs/CSS/Child_selectors /en-US/docs/Web/CSS/Child_combinator /en-US/docs/CSS/Class_selectors /en-US/docs/Web/CSS/Class_selectors /en-US/docs/CSS/Comments /en-US/docs/Web/CSS/Comments @@ -523,7 +523,7 @@ /en-US/docs/CSS/Scaling_background_images /en-US/docs/Web/CSS/CSS_backgrounds_and_borders/Resizing_background_images /en-US/docs/CSS/Scaling_of_SVG_backgrounds /en-US/docs/Web/CSS/Scaling_of_SVG_backgrounds /en-US/docs/CSS/Shorthand_properties /en-US/docs/Web/CSS/Shorthand_properties -/en-US/docs/CSS/Specificity /en-US/docs/Web/CSS/Specificity +/en-US/docs/CSS/Specificity /en-US/docs/Web/CSS/CSS_cascade/Specificity /en-US/docs/CSS/Syntax /en-US/docs/Web/CSS/Syntax /en-US/docs/CSS/Text-overflow_TEST /en-US/docs/Web/CSS/text-overflow /en-US/docs/CSS/Tutorial/Using_CSS_flexible_boxes /en-US/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox @@ -11940,6 +11940,7 @@ /en-US/docs/Web/CSS/CSS_transform_functions /en-US/docs/Web/CSS/transform /en-US/docs/Web/CSS/CSS_values_serialization /en-US/docs/Web/CSS /en-US/docs/Web/CSS/CSS_values_syntax /en-US/docs/Web/CSS +/en-US/docs/Web/CSS/Cascade /en-US/docs/Web/CSS/CSS_cascade/Cascade /en-US/docs/Web/CSS/Child_selectors /en-US/docs/Web/CSS/Child_combinator /en-US/docs/Web/CSS/Common_CSS_Questions /en-US/docs/Learn_web_development/Howto/Solve_CSS_problems/CSS_FAQ /en-US/docs/Web/CSS/Compositing_and_Blending /en-US/docs/Web/CSS/CSS_compositing_and_blending @@ -11970,6 +11971,7 @@ /en-US/docs/Web/CSS/Reference/object-position /en-US/docs/Web/CSS/object-position /en-US/docs/Web/CSS/Selector_lists /en-US/docs/Web/CSS/Selector_list /en-US/docs/Web/CSS/Selectors /en-US/docs/Web/CSS/CSS_Selectors +/en-US/docs/Web/CSS/Specificity /en-US/docs/Web/CSS/CSS_cascade/Specificity /en-US/docs/Web/CSS/Text-overflow_TEST /en-US/docs/Web/CSS/text-overflow /en-US/docs/Web/CSS/Tools /en-US/docs/Web/CSS /en-US/docs/Web/CSS/Tools/Border-image_generator /en-US/docs/Web/CSS/CSS_backgrounds_and_borders/Border-image_generator diff --git a/files/en-us/_wikihistory.json b/files/en-us/_wikihistory.json index 8c0e9bbc4ab2ed1..57cbbf21b1907ae 100644 --- a/files/en-us/_wikihistory.json +++ b/files/en-us/_wikihistory.json @@ -76239,6 +76239,90 @@ "Fredchat" ] }, + "Web/CSS/CSS_cascade/Cascade": { + "modified": "2020-07-27T13:35:05.470Z", + "contributors": [ + "wbamberg", + "jswisher", + "mfuji09", + "fazl", + "marcelobcortes", + "birtles", + "agarun", + "ExE-Boss", + "dashlee92", + "oliverbaptiste", + "01abhishekjain", + "michaeljgut", + "Sheppy", + "Biiinggg", + "mfluehr", + "chrisdavidmills", + "merelinguist", + "verv0eren", + "HarryPehkonen", + "malozaibi", + "Sebastianz", + "mrevan", + "rralian", + "nasifmdtanjim", + "velvel53", + "teoli" + ] + }, + "Web/CSS/CSS_cascade/Specificity": { + "modified": "2020-11-14T16:01:00.890Z", + "contributors": [ + "mfuji09", + "An-Error94", + "ExE-Boss", + "elias6", + "Sajag", + "Aerodium", + "CodeLight", + "estelle", + "tommygebru", + "tama200", + "mfluehr", + "sekkuar", + "rileym7", + "Anawriter1", + "dustinryerson", + "yannicka", + "Artoria2e5", + "RobinHu", + "david_ross", + "chrisprobably", + "jnachtigall", + "fcard", + "jsx", + "rolfedh", + "PushpitaPikuDey", + "Tigt", + "kmhrussell17", + "kustolovic", + "SeriouslyAwesome", + "mina86", + "diraniyoussef", + "rralian", + "mflodin", + "ahmedsai001", + "dawsonda", + "mkollra01", + "applescr", + "Sebastianz", + "SphinxKnight", + "kscarfone", + "pablofiumara", + "FredB", + "teoli", + "ethertank", + "Sheppy", + "MattBrubeck", + "fryn", + "jwalker" + ] + }, "Web/CSS/CSS_cascading_variables": { "modified": "2020-07-07T12:03:44.891Z", "contributors": ["wbamberg", "mfluehr"] @@ -77890,37 +77974,6 @@ "teoli" ] }, - "Web/CSS/Cascade": { - "modified": "2020-07-27T13:35:05.470Z", - "contributors": [ - "wbamberg", - "jswisher", - "mfuji09", - "fazl", - "marcelobcortes", - "birtles", - "agarun", - "ExE-Boss", - "dashlee92", - "oliverbaptiste", - "01abhishekjain", - "michaeljgut", - "Sheppy", - "Biiinggg", - "mfluehr", - "chrisdavidmills", - "merelinguist", - "verv0eren", - "HarryPehkonen", - "malozaibi", - "Sebastianz", - "mrevan", - "rralian", - "nasifmdtanjim", - "velvel53", - "teoli" - ] - }, "Web/CSS/Child_combinator": { "modified": "2020-10-15T21:04:19.088Z", "contributors": [ @@ -78498,59 +78551,6 @@ "alecananian" ] }, - "Web/CSS/Specificity": { - "modified": "2020-11-14T16:01:00.890Z", - "contributors": [ - "mfuji09", - "An-Error94", - "ExE-Boss", - "elias6", - "Sajag", - "Aerodium", - "CodeLight", - "estelle", - "tommygebru", - "tama200", - "mfluehr", - "sekkuar", - "rileym7", - "Anawriter1", - "dustinryerson", - "yannicka", - "Artoria2e5", - "RobinHu", - "david_ross", - "chrisprobably", - "jnachtigall", - "fcard", - "jsx", - "rolfedh", - "PushpitaPikuDey", - "Tigt", - "kmhrussell17", - "kustolovic", - "SeriouslyAwesome", - "mina86", - "diraniyoussef", - "rralian", - "mflodin", - "ahmedsai001", - "dawsonda", - "mkollra01", - "applescr", - "Sebastianz", - "SphinxKnight", - "kscarfone", - "pablofiumara", - "FredB", - "teoli", - "ethertank", - "Sheppy", - "MattBrubeck", - "fryn", - "jwalker" - ] - }, "Web/CSS/Subsequent-sibling_combinator": { "modified": "2020-10-15T21:04:16.746Z", "contributors": [ diff --git a/files/en-us/glossary/semantics/index.md b/files/en-us/glossary/semantics/index.md index 5453746e577485c..421f5a3c8bd8342 100644 --- a/files/en-us/glossary/semantics/index.md +++ b/files/en-us/glossary/semantics/index.md @@ -24,7 +24,7 @@ In HTML, for example, the {{htmlelement("Heading_Elements", "h1")}} element is a

This is a top level heading

``` -By default, most browser's [user agent stylesheet](/en-US/docs/Web/CSS/Cascade#user-agent_stylesheets) will style an {{htmlelement("Heading_Elements", "h1")}} with a large font size to make it _look_ like a heading (although you could style it to look like anything you wanted). +By default, most browser's [user agent stylesheet](/en-US/docs/Web/CSS/CSS_cascade/Cascade#user-agent_stylesheets) will style an {{htmlelement("Heading_Elements", "h1")}} with a large font size to make it _look_ like a heading (although you could style it to look like anything you wanted). On the other hand, you could make any element _look_ like a top level heading. Consider the following: diff --git a/files/en-us/learn_web_development/core/styling_basics/cascade_layers/index.md b/files/en-us/learn_web_development/core/styling_basics/cascade_layers/index.md index 7a729e2a3dcd257..5f0b61e23fec946 100644 --- a/files/en-us/learn_web_development/core/styling_basics/cascade_layers/index.md +++ b/files/en-us/learn_web_development/core/styling_basics/cascade_layers/index.md @@ -6,7 +6,7 @@ page-type: learn-module-chapter {{LearnSidebar}} -This lesson aims to introduce you to [cascade layers](/en-US/docs/Web/CSS/@layer), a more advanced feature that builds on the fundamental concepts of the [CSS cascade](/en-US/docs/Web/CSS/Cascade) and [CSS specificity](/en-US/docs/Web/CSS/Specificity). +This lesson aims to introduce you to [cascade layers](/en-US/docs/Web/CSS/@layer), a more advanced feature that builds on the fundamental concepts of the [CSS cascade](/en-US/docs/Web/CSS/CSS_cascade/Cascade) and [CSS specificity](/en-US/docs/Web/CSS/CSS_cascade/Specificity). If you are new to CSS, working through this lesson may seem less relevant immediately and a little more academic than some other parts of the course. However, knowing the basics of what cascade layers are should you encounter them in your projects is helpful. The more you work with CSS, understanding cascade layers and knowing how to leverage their power will save you from a lot of pain managing a code base with CSS from different parties, plugins, and development teams. @@ -45,7 +45,7 @@ The 'C' in CSS stands for "Cascading". It is the method by which styles cascade 2. **Importance:** Sort rules based on whether they are normal or important. Important styles are those that have the [`!important`](/en-US/docs/Web/CSS/important) flag set. 3. **Origin:** Within each of the two importance buckets, sort rules by author, user, or user-agent origin. 4. **Cascade layers:** Within each of the six origin importance buckets, sort by cascade layer. The layer order for normal declarations is from the first layer created to the last, followed by unlayered normal styles. This order is inverted for important styles, with unlayered important styles having the lowest precedence. -5. **Specificity:** For competing styles in the origin layer with precedence, sort declarations by [specificity](/en-US/docs/Web/CSS/Specificity). +5. **Specificity:** For competing styles in the origin layer with precedence, sort declarations by [specificity](/en-US/docs/Web/CSS/CSS_cascade/Specificity). 6. **Scoping proximity**: When two selectors in the origin layer with precedence have the same specificity, the property value within scoped rules with the smallest number of hops up the DOM hierarchy to the scope root wins. See [How `@scope` conflicts are resolved](/en-US/docs/Web/CSS/@scope#how_scope_conflicts_are_resolved) for more details and an example. 7. **Order of appearance:** When two selectors in the origin layer with precedence have the same specificity and scope proximity, the property value from the last declared selector with the highest specificity wins. @@ -53,7 +53,7 @@ For each step, only the declarations "still in the running" move on to "compete" ### Origin and cascade -There are three [cascade origin types](/en-US/docs/Web/CSS/Cascade#origin_types): user-agent stylesheets, user stylesheets, and author stylesheets. The browser sorts each declaration into six origin buckets by origin and importance. There are eight levels of precedence: the six origin buckets, properties that are transitioning, and properties that are animating. The order of precedence goes from normal user-agent styles, which have the lowest precedence, to styles within currently applied animations, to important user-agent styles, and then styles being transitioned, which have the highest precedence: +There are three [cascade origin types](/en-US/docs/Web/CSS/CSS_cascade/Cascade#origin_types): user-agent stylesheets, user stylesheets, and author stylesheets. The browser sorts each declaration into six origin buckets by origin and importance. There are eight levels of precedence: the six origin buckets, properties that are transitioning, and properties that are animating. The order of precedence goes from normal user-agent styles, which have the lowest precedence, to styles within currently applied animations, to important user-agent styles, and then styles being transitioned, which have the highest precedence: 1. user-agent normal styles 2. user normal styles @@ -68,9 +68,9 @@ The "user-agent" is the browser. The "user" is the site visitor. The "author" is ### Origin and specificity -For each property, the declaration that "wins" is the one from the origin with precedence based on the weight (normal or important). Ignoring layers for the moment, the value from the origin with the highest precedence gets applied. If the winning origin has more than one property declaration for an element, the [specificity](/en-US/docs/Web/CSS/Specificity) of the selectors for those competing property values are compared. Specificity is never compared between selectors from different origins. +For each property, the declaration that "wins" is the one from the origin with precedence based on the weight (normal or important). Ignoring layers for the moment, the value from the origin with the highest precedence gets applied. If the winning origin has more than one property declaration for an element, the [specificity](/en-US/docs/Web/CSS/CSS_cascade/Specificity) of the selectors for those competing property values are compared. Specificity is never compared between selectors from different origins. -In the example below, there are two links. The first has no author styles applied, so only user-agent styles are applied (and your personal user styles, if any). The second has [`text-decoration`](/en-US/docs/Web/CSS/text-decoration) and [`color`](/en-US/docs/Web/CSS/color) set by author styles even though the selector in the author stylesheet has a specificity of [`0-0-0`](/en-US/docs/Web/CSS/Specificity#selector_weight_categories). The reason why author styles "win" is because when there are conflicting styles from different origins, the rules from the origin with precedence are applied, irrespective of the specificity in the origin that doesn't have precedence. +In the example below, there are two links. The first has no author styles applied, so only user-agent styles are applied (and your personal user styles, if any). The second has [`text-decoration`](/en-US/docs/Web/CSS/text-decoration) and [`color`](/en-US/docs/Web/CSS/color) set by author styles even though the selector in the author stylesheet has a specificity of [`0-0-0`](/en-US/docs/Web/CSS/CSS_cascade/Specificity#selector_weight_categories). The reason why author styles "win" is because when there are conflicting styles from different origins, the rules from the origin with precedence are applied, irrespective of the specificity in the origin that doesn't have precedence. ```html live-sample___basic-cascade

User agent styles

@@ -86,7 +86,7 @@ In the example below, there are two links. The first has no author styles applie {{EmbedLiveSample("basic-cascade")}} -The "competing" selector in the user-agent stylesheet at the time of this writing is `a:any-link`, which has a specificity weight of `0-1-1`. While this is greater than the `0-0-0` selector in the author stylesheet, even if the selector in your current user agent is different, it doesn't matter: the specificity weights from author and user-agent origins are never compared. Learn more about [how specificity weight is calculated](/en-US/docs/Web/CSS/Specificity#how_is_specificity_calculated). +The "competing" selector in the user-agent stylesheet at the time of this writing is `a:any-link`, which has a specificity weight of `0-1-1`. While this is greater than the `0-0-0` selector in the author stylesheet, even if the selector in your current user agent is different, it doesn't matter: the specificity weights from author and user-agent origins are never compared. Learn more about [how specificity weight is calculated](/en-US/docs/Web/CSS/CSS_cascade/Specificity#how_is_specificity_calculated). Origin precedence always wins over selector specificity. If an element property is styled with a normal style declaration in multiple origins, the author style sheet will always override the redundant normal properties declared in a user or user-agent stylesheet. If the style is important, the user-agent stylesheet will always win over author and user styles. Cascade origin precedence ensures specificity conflicts between origins never happen. diff --git a/files/en-us/learn_web_development/core/styling_basics/handling_conflicts/index.md b/files/en-us/learn_web_development/core/styling_basics/handling_conflicts/index.md index 40b1474079e9a95..f8c8e5125e90ecd 100644 --- a/files/en-us/learn_web_development/core/styling_basics/handling_conflicts/index.md +++ b/files/en-us/learn_web_development/core/styling_basics/handling_conflicts/index.md @@ -41,7 +41,7 @@ While working through this lesson may seem less relevant immediately and a littl CSS stands for **Cascading Style Sheets**, and that first word _cascading_ is incredibly important to understand — the way that the cascade behaves is key to understanding CSS. -At some point, you will be working on a project and you will find that the CSS you thought should be applied to an element is not working. Often, the problem is that you create two rules that apply different values of the same property to the same element. [**Cascade**](/en-US/docs/Web/CSS/Cascade) and the closely-related concept of [**specificity**](/en-US/docs/Web/CSS/Specificity) are mechanisms that control which rule applies when there is such a conflict. The rule that's styling your element may not be the one you expect, so you need to understand how these mechanisms work. +At some point, you will be working on a project and you will find that the CSS you thought should be applied to an element is not working. Often, the problem is that you create two rules that apply different values of the same property to the same element. [**Cascade**](/en-US/docs/Web/CSS/CSS_cascade/Cascade) and the closely-related concept of [**specificity**](/en-US/docs/Web/CSS/CSS_cascade/Specificity) are mechanisms that control which rule applies when there is such a conflict. The rule that's styling your element may not be the one you expect, so you need to understand how these mechanisms work. Also significant here is the concept of [**inheritance**](/en-US/docs/Web/CSS/Inheritance), which means that some CSS properties by default inherit values set on the current element's parent element and some don't. This can also cause some behavior that you might not expect. @@ -49,7 +49,7 @@ Let's start by taking a quick look at the key things we are dealing with, then w ### Cascade -Stylesheets [**cascade**](/en-US/docs/Web/CSS/Cascade) — at a very simple level, this means that the origin and the order of CSS rules matter. When two rules both have equal specificity, the one that is defined last in the stylesheet is the one that will be used. There are other concepts that have an effect, such as [cascade layers](/en-US/docs/Learn_web_development/Core/Styling_basics/Cascade_layers), but these are more advanced and we won't cover them in any detail here. +Stylesheets [**cascade**](/en-US/docs/Web/CSS/CSS_cascade/Cascade) — at a very simple level, this means that the origin and the order of CSS rules matter. When two rules both have equal specificity, the one that is defined last in the stylesheet is the one that will be used. There are other concepts that have an effect, such as [cascade layers](/en-US/docs/Learn_web_development/Core/Styling_basics/Cascade_layers), but these are more advanced and we won't cover them in any detail here. In the below example, we have two rules that could apply to the `

` element. The `

` content ends up being colored blue. This is because both the rules are from the same source, have an identical element selector, and therefore, carry the same specificity, but the last one in the source order wins. @@ -70,7 +70,7 @@ h1 { ### Specificity -[Specificity](/en-US/docs/Web/CSS/Specificity) is the algorithm that the browser uses to decide which property value is applied to an element. If multiple style blocks have different selectors that configure the same property with different values and target the same element, specificity decides the property value that gets applied to the element. Specificity is basically a measure of how specific a selector's selection will be: +[Specificity](/en-US/docs/Web/CSS/CSS_cascade/Specificity) is the algorithm that the browser uses to decide which property value is applied to an element. If multiple style blocks have different selectors that configure the same property with different values and target the same element, specificity decides the property value that gets applied to the element. Specificity is basically a measure of how specific a selector's selection will be: - An element selector is less specific; it will select all elements of that type that appear on a page, so it has less weight. Pseudo-element selectors have the same specificity as regular element selectors. - A class selector is more specific; it will select only the elements on a page that have a specific `class` attribute value, so it has more weight. Attribute selectors and pseudo-classes have the same weight as a class. @@ -200,7 +200,7 @@ CSS provides five special universal property values for controlling inheritance. - : Resets the property to its natural value, which means that if the property is naturally inherited it acts like `inherit`, otherwise it acts like `initial`. > [!NOTE] -> See [Origin types](/en-US/docs/Web/CSS/Cascade#origin_types) for more information on each of these and how they work. +> See [Origin types](/en-US/docs/Web/CSS/CSS_cascade/Cascade#origin_types) for more information on each of these and how they work. We can look at a list of links and explore how universal values work. The live example below allows you to play with the CSS and see what happens when you make changes. Playing with code really is the best way to better understand HTML and CSS. diff --git a/files/en-us/learn_web_development/core/styling_basics/index.md b/files/en-us/learn_web_development/core/styling_basics/index.md index debabed4a127d05..4cc896039317f3b 100644 --- a/files/en-us/learn_web_development/core/styling_basics/index.md +++ b/files/en-us/learn_web_development/core/styling_basics/index.md @@ -65,7 +65,7 @@ These tutorials are not part of the learning pathway, but they are interesting n - [Advanced styling effects](/en-US/docs/Learn_web_development/Core/Styling_basics/Advanced_styling_effects) - : This article will give you guidance on how to go about debugging a CSS problem, and show you how the DevTools included in all modern browsers can help you to find out what is going on. - [Cascade layers](/en-US/docs/Learn_web_development/Core/Styling_basics/Cascade_layers) - - : This lesson aims to introduce you to [cascade layers](/en-US/docs/Web/CSS/@layer), a more advanced feature that builds on the fundamental concepts of the [CSS cascade](/en-US/docs/Web/CSS/Cascade) and [CSS specificity](/en-US/docs/Web/CSS/Specificity). + - : This lesson aims to introduce you to [cascade layers](/en-US/docs/Web/CSS/@layer), a more advanced feature that builds on the fundamental concepts of the [CSS cascade](/en-US/docs/Web/CSS/CSS_cascade/Cascade) and [CSS specificity](/en-US/docs/Web/CSS/CSS_cascade/Specificity). - [Handling different text directions](/en-US/docs/Learn_web_development/Core/Styling_basics/Handling_different_text_directions) - : In recent years, CSS has evolved in order to better support different directionality of content, including right-to-left but also top-to-bottom content (such as Japanese) — these different directionalities are called writing modes. As you progress in your study and begin to work with layout, an understanding of writing modes will be very helpful to you, therefore we will introduce them in this article. - [Organizing CSS](/en-US/docs/Learn_web_development/Core/Styling_basics/Organizing) diff --git a/files/en-us/learn_web_development/howto/solve_css_problems/css_faq/index.md b/files/en-us/learn_web_development/howto/solve_css_problems/css_faq/index.md index 1194938b2f05146..c2898f1de200039 100644 --- a/files/en-us/learn_web_development/howto/solve_css_problems/css_faq/index.md +++ b/files/en-us/learn_web_development/howto/solve_css_problems/css_faq/index.md @@ -248,7 +248,7 @@ div {
This is red
``` -The rules are more complicated when the selector has multiple parts. A more detailed explanation about how selector specificity is calculated can be found in the [CSS specificity documentation](/en-US/docs/Web/CSS/Specificity). +The rules are more complicated when the selector has multiple parts. A more detailed explanation about how selector specificity is calculated can be found in the [CSS specificity documentation](/en-US/docs/Web/CSS/CSS_cascade/Specificity). ## What do the -moz-\*, -ms-\*, -webkit-\*, -o-\* and -khtml-\* properties do? diff --git a/files/en-us/mdn/tutorials/index.md b/files/en-us/mdn/tutorials/index.md index 25ee628cfd9d3c3..a87096b9d5ae86c 100644 --- a/files/en-us/mdn/tutorials/index.md +++ b/files/en-us/mdn/tutorials/index.md @@ -47,7 +47,7 @@ These tutorials are created by forward-thinking companies and web developers who - : CSS (Cascading Style Sheets) is used to style and lay out web pages — for example, to alter the font, color, size, and spacing of your content, split it into multiple columns, or add animations and other decorative features. This module provides a gentle beginning to your path toward CSS mastery with the basics of how it works, what the syntax looks like, and how you can start using it to add styling to HTML. - [Selectors](/en-US/docs/Learn_web_development/Core/Styling_basics/Basic_selectors) - : Target HTML elements, including based on element state, with CSS. -- [Specificity](/en-US/docs/Web/CSS/Specificity) +- [Specificity](/en-US/docs/Web/CSS/CSS_cascade/Specificity) - : Understanding the browser algorithm to determine which CSS declarations get applied to an element when there are competing declarations, with a [specificity quiz](https://estelle.github.io/CSS/selectors/exercises/specificity.html). - [Handling conflicts](/en-US/docs/Learn_web_development/Core/Styling_basics/Handling_conflicts) - : The cascade, specificity, and inheritance control how CSS is applied to HTML and how conflicts between style declarations are resolved. diff --git a/files/en-us/mozilla/add-ons/webextensions/api/scripting/insertcss/index.md b/files/en-us/mozilla/add-ons/webextensions/api/scripting/insertcss/index.md index 2d2737b2ef2754e..5cb5a29e26c55c1 100644 --- a/files/en-us/mozilla/add-ons/webextensions/api/scripting/insertcss/index.md +++ b/files/en-us/mozilla/add-ons/webextensions/api/scripting/insertcss/index.md @@ -45,7 +45,7 @@ await browser.scripting.insertCSS( - : `string`. The style origin for the injection, either `USER`, to add the CSS as a user stylesheet, or `AUTHOR`, to add it as an author stylesheet. Defaults to `AUTHOR`. - - `USER` enables you to prevent websites from overriding the CSS you insert: see [Cascading order](/en-US/docs/Web/CSS/Cascade#cascading_order). + - `USER` enables you to prevent websites from overriding the CSS you insert: see [Cascading order](/en-US/docs/Web/CSS/CSS_cascade/Cascade#cascading_order). - `AUTHOR` stylesheets behave as if they appear after all author rules specified by the web page. This behavior includes any author stylesheets added dynamically by the page's scripts, even if that addition happens after the `insertCSS` call completes. - `target` diff --git a/files/en-us/mozilla/add-ons/webextensions/api/tabs/insertcss/index.md b/files/en-us/mozilla/add-ons/webextensions/api/tabs/insertcss/index.md index f49f78ddf2a3be1..34d8c763ff2bb96 100644 --- a/files/en-us/mozilla/add-ons/webextensions/api/tabs/insertcss/index.md +++ b/files/en-us/mozilla/add-ons/webextensions/api/tabs/insertcss/index.md @@ -48,7 +48,7 @@ let inserting = browser.tabs.insertCSS( - : `string`. This can take one of two values: "user", to add the CSS as a user stylesheet or "author" to add it as an author stylesheet. If this option is omitted, the CSS is added as an author stylesheet. - - "user" enables you to prevent websites from overriding the CSS you insert: see [Cascading order](/en-US/docs/Web/CSS/Cascade#cascading_order). + - "user" enables you to prevent websites from overriding the CSS you insert: see [Cascading order](/en-US/docs/Web/CSS/CSS_cascade/Cascade#cascading_order). - "author" stylesheets behave as if they appear after all author rules specified by the web page. This behavior includes any author stylesheets added dynamically by the page's scripts, even if that addition happens after the `insertCSS` call completes. - `file` {{optional_inline}} diff --git a/files/en-us/web/api/animation/commitstyles/index.md b/files/en-us/web/api/animation/commitstyles/index.md index 7a41e4e97440ba8..024347115f95712 100644 --- a/files/en-us/web/api/animation/commitstyles/index.md +++ b/files/en-us/web/api/animation/commitstyles/index.md @@ -10,7 +10,7 @@ browser-compat: api.Animation.commitStyles The `commitStyles()` method of the [Web Animations API](/en-US/docs/Web/API/Web_Animations_API)'s {{domxref("Animation")}} interface writes the [computed values](/en-US/docs/Web/CSS/computed_value) of the animation's current styles into its target element's [`style`](/en-US/docs/Web/HTML/Global_attributes/style) attribute. `commitStyles()` works even if the animation has been [automatically removed](/en-US/docs/Web/API/Web_Animations_API/Using_the_Web_Animations_API#automatically_removing_filling_animations). -`commitStyles()` can be used in combination with `fill` to cause the final state of an animation to persist after the animation ends. The same effect could be achieved with `fill` alone, but [using indefinitely filling animations is discouraged](https://drafts.csswg.org/web-animations-1/#fill-behavior). Animations [take precedence over all static styles](/en-US/docs/Web/CSS/Cascade#cascading_order), so an indefinite filling animation can prevent the target element from ever being styled normally. +`commitStyles()` can be used in combination with `fill` to cause the final state of an animation to persist after the animation ends. The same effect could be achieved with `fill` alone, but [using indefinitely filling animations is discouraged](https://drafts.csswg.org/web-animations-1/#fill-behavior). Animations [take precedence over all static styles](/en-US/docs/Web/CSS/CSS_cascade/Cascade#cascading_order), so an indefinite filling animation can prevent the target element from ever being styled normally. Using `commitStyles()` writes the styling state into the element's [`style`](/en-US/docs/Web/HTML/Global_attributes/style) attribute, where they can be modified and replaced as normal. diff --git a/files/en-us/web/api/document/adoptedstylesheets/index.md b/files/en-us/web/api/document/adoptedstylesheets/index.md index 274d97d1e7c205d..c28aa873d3e2a22 100644 --- a/files/en-us/web/api/document/adoptedstylesheets/index.md +++ b/files/en-us/web/api/document/adoptedstylesheets/index.md @@ -16,7 +16,7 @@ The **`adoptedStyleSheets`** property of the {{domxref("Document")}} interface i The same constructed stylesheets can also be shared with one or more {{domxref("ShadowRoot")}} instances using the [`ShadowRoot.adoptedStyleSheets`](/en-US/docs/Web/API/ShadowRoot/adoptedStyleSheets) property. Changing an adopted stylesheet will affect all the objects that adopt it. -Stylesheets in the property are evaluated along with the document's other stylesheets using the [CSS cascade algorithm](/en-US/docs/Web/CSS/Cascade). +Stylesheets in the property are evaluated along with the document's other stylesheets using the [CSS cascade algorithm](/en-US/docs/Web/CSS/CSS_cascade/Cascade). Where the resolution of rules considers stylesheet order, `adoptedStyleSheets` are assumed to be ordered after those in [`Document.styleSheets`](/en-US/docs/Web/API/Document/styleSheets). Only stylesheets created using the [`CSSStyleSheet()` constructor](/en-US/docs/Web/API/CSSStyleSheet/CSSStyleSheet) within the context of the current {{domxref("Document")}} may be adopted. diff --git a/files/en-us/web/api/web_animations_api/using_the_web_animations_api/index.md b/files/en-us/web/api/web_animations_api/using_the_web_animations_api/index.md index d3defdc723fbda0..80bdc2c3025e139 100644 --- a/files/en-us/web/api/web_animations_api/using_the_web_animations_api/index.md +++ b/files/en-us/web/api/web_animations_api/using_the_web_animations_api/index.md @@ -239,7 +239,7 @@ The background elements also have `playbackRate`s that are impacted when you cli When animating elements, a common use case is to persist the final state of the animation, after the animation has finished. One method sometimes used for this is to set the animation's [fill mode](/en-US/docs/Web/API/KeyframeEffect/KeyframeEffect#fill) to `forwards`. However, it is not recommended to use fill modes to persist the effect of an animation indefinitely, for two reasons: - The browser has to maintain the state of the animation while it is still active, so the animation continues to consume resources even though it is no longer animating. Note that this is somewhat alleviated by the browser [automatically removing filling animations](#automatically_removing_filling_animations). -- Styles applied by animations have a [higher precedence in the cascade](/en-US/docs/Web/CSS/Cascade#cascading_order) than specified styles, so it can be difficult to override them when needed. +- Styles applied by animations have a [higher precedence in the cascade](/en-US/docs/Web/CSS/CSS_cascade/Cascade#cascading_order) than specified styles, so it can be difficult to override them when needed. A better approach is to use the {{domxref("Animation.commitStyles()")}} method. This writes the computed values of the animation's current styles into its target element's [`style`](/en-US/docs/Web/HTML/Global_attributes/style) attribute, after which the element can be restyled normally. diff --git a/files/en-us/web/css/@font-face/font-weight/index.md b/files/en-us/web/css/@font-face/font-weight/index.md index 897496fc0020a7b..20f5defe9ca15a5 100644 --- a/files/en-us/web/css/@font-face/font-weight/index.md +++ b/files/en-us/web/css/@font-face/font-weight/index.md @@ -161,7 +161,7 @@ The other three declarations use the light, bold, and extra-bold versions of the - the bold font is associated with the range 500-700 - the extra-bold font is associated with the range 700-1000 -The CSS [cascade](/en-US/docs/Web/CSS/Cascade) ensures that the three latter declarations override parts of the range that was set in the `FiraSans-Regular` declaration. +The CSS [cascade](/en-US/docs/Web/CSS/CSS_cascade/Cascade) ensures that the three latter declarations override parts of the range that was set in the `FiraSans-Regular` declaration. ```css @font-face { diff --git a/files/en-us/web/css/@layer/index.md b/files/en-us/web/css/@layer/index.md index 424ceab4ca6504a..434f72815964272 100644 --- a/files/en-us/web/css/@layer/index.md +++ b/files/en-us/web/css/@layer/index.md @@ -213,7 +213,7 @@ In the following example, two layers are created with no rules applied, then CSS - {{domxref("CSSLayerStatementRule")}} - [`!important`](/en-US/docs/Web/CSS/important) - [`revert-layer`](/en-US/docs/Web/CSS/revert-layer) -- [Introducing the CSS cascade](/en-US/docs/Web/CSS/Cascade) +- [Introducing the CSS cascade](/en-US/docs/Web/CSS/CSS_cascade/Cascade) - [Learn: Handling conflicts](/en-US/docs/Learn_web_development/Core/Styling_basics/Handling_conflicts) - [Learn: Cascade layers](/en-US/docs/Learn_web_development/Core/Styling_basics/Cascade_layers) - [The future of CSS: Cascade layers](https://www.bram.us/2021/09/15/the-future-of-css-cascade-layers-css-at-layer/) on bram.us (2021) diff --git a/files/en-us/web/css/@media/prefers-reduced-motion/index.md b/files/en-us/web/css/@media/prefers-reduced-motion/index.md index 87f168b0e769349..e7231232dd0eeed 100644 --- a/files/en-us/web/css/@media/prefers-reduced-motion/index.md +++ b/files/en-us/web/css/@media/prefers-reduced-motion/index.md @@ -46,7 +46,7 @@ For Firefox, the `reduce` request is honoured if: ## Examples -This example uses a scaling animation for the purpose of demonstrating `prefers-reduced-motion`. If you enable the setting for reducing motion in the accessibility preferences on your device, the `prefers-reduced-motion` media query will detect your preference and the CSS within the reduced motion rules, with the same [specificity](/en-US/docs/Web/CSS/Specificity) but coming later in the [CSS source order](/en-US/docs/Learn_web_development/Core/Styling_basics/Handling_conflicts#source_order), will take precedence. As a result, the [animation](/en-US/docs/Web/CSS/CSS_animations/Using_CSS_animations) on the box will tone down to the `dissolve` animation, which is a more muted animation that is not a vestibular motion trigger. +This example uses a scaling animation for the purpose of demonstrating `prefers-reduced-motion`. If you enable the setting for reducing motion in the accessibility preferences on your device, the `prefers-reduced-motion` media query will detect your preference and the CSS within the reduced motion rules, with the same [specificity](/en-US/docs/Web/CSS/CSS_cascade/Specificity) but coming later in the [CSS source order](/en-US/docs/Learn_web_development/Core/Styling_basics/Handling_conflicts#source_order), will take precedence. As a result, the [animation](/en-US/docs/Web/CSS/CSS_animations/Using_CSS_animations) on the box will tone down to the `dissolve` animation, which is a more muted animation that is not a vestibular motion trigger. ### Toning down the animation scaling diff --git a/files/en-us/web/css/@scope/index.md b/files/en-us/web/css/@scope/index.md index ece82eefdf94af6..b93b2b356aceb8f 100644 --- a/files/en-us/web/css/@scope/index.md +++ b/files/en-us/web/css/@scope/index.md @@ -278,7 +278,7 @@ To fix this, you can use `@scope` as follows: Now the innermost paragraph is correctly colored black. This is because it is only one DOM tree hierarchy level away from the `.light-theme` scope root, but two levels away from the `.dark-theme` scope root. Therefore, the light style wins. > [!NOTE] -> Scoping proximity overrules source order but is itself overridden by other, higher-priority criteria such as [importance](/en-US/docs/Web/CSS/important), [layers](/en-US/docs/Learn_web_development/Core/Styling_basics/Cascade_layers), and [specificity](/en-US/docs/Web/CSS/Specificity). +> Scoping proximity overrules source order but is itself overridden by other, higher-priority criteria such as [importance](/en-US/docs/Web/CSS/important), [layers](/en-US/docs/Learn_web_development/Core/Styling_basics/Cascade_layers), and [specificity](/en-US/docs/Web/CSS/CSS_cascade/Specificity). ## Formal syntax diff --git a/files/en-us/web/css/@starting-style/index.md b/files/en-us/web/css/@starting-style/index.md index 34dcb2ea2f5ea40..daa5941bb7924f2 100644 --- a/files/en-us/web/css/@starting-style/index.md +++ b/files/en-us/web/css/@starting-style/index.md @@ -64,7 +64,7 @@ To specify the starting values of the popover's properties that will be animated ``` > [!NOTE] -> The `@starting-style` at-rule and the "original rule" have the same {{cssxref("specificity")}}. To ensure that starting styles get applied, include the `@starting-style` at-rule _after_ the "original rule". If you specify the `@starting-style` at-rule before the "original rule", the original styles will override the starting styles. +> The `@starting-style` at-rule and the "original rule" have the same [specificity](/en-US/docs/Web/CSS/CSS_cascade/Specificity). To ensure that starting styles get applied, include the `@starting-style` at-rule _after_ the "original rule". If you specify the `@starting-style` at-rule before the "original rule", the original styles will override the starting styles. To specify the starting style for the popover using the nested method, you can nest the `@starting-style` block inside the "original rule": diff --git a/files/en-us/web/css/_colon_has/index.md b/files/en-us/web/css/_colon_has/index.md index 722d5b4b5d154a9..66308878e2cb0e4 100644 --- a/files/en-us/web/css/_colon_has/index.md +++ b/files/en-us/web/css/_colon_has/index.md @@ -18,7 +18,7 @@ h1:has(+ p) { } ``` -The `:has()` pseudo-class takes on the [specificity](/en-US/docs/Web/CSS/Specificity) of the most specific selector in its arguments the same way as {{CSSxRef(":is", ":is()")}} and {{CSSxRef(":not", ":not()")}} do. +The `:has()` pseudo-class takes on the [specificity](/en-US/docs/Web/CSS/CSS_cascade/Specificity) of the most specific selector in its arguments the same way as {{CSSxRef(":is", ":is()")}} and {{CSSxRef(":not", ":not()")}} do. ## Syntax diff --git a/files/en-us/web/css/_colon_host-context/index.md b/files/en-us/web/css/_colon_host-context/index.md index 1efac6de34cd135..1091b1e3cf4cf70 100644 --- a/files/en-us/web/css/_colon_host-context/index.md +++ b/files/en-us/web/css/_colon_host-context/index.md @@ -20,7 +20,7 @@ To limit the selector to only the `` host directly or limit the sele > [!NOTE] > This has no effect when used outside a shadow DOM. -The [specificity](/en-US/docs/Web/CSS/Specificity) of `:host-context()` is that of a [pseudo-class](/en-US/docs/Web/CSS/Pseudo-classes), plus the specificity of the selector passed as the function's argument. +The [specificity](/en-US/docs/Web/CSS/CSS_cascade/Specificity) of `:host-context()` is that of a [pseudo-class](/en-US/docs/Web/CSS/Pseudo-classes), plus the specificity of the selector passed as the function's argument. {{EmbedInteractiveExample("pages/tabbed/pseudo-class-host-context.html", "tabbed-shorter")}} diff --git a/files/en-us/web/css/_colon_is/index.md b/files/en-us/web/css/_colon_is/index.md index 50c8d27475fedea..3bf72356842696a 100644 --- a/files/en-us/web/css/_colon_is/index.md +++ b/files/en-us/web/css/_colon_is/index.md @@ -225,6 +225,6 @@ some-element::after { ## See also -- {{CSSxRef(":where", ":where()")}} - Like `:is()`, but with 0 [specificity](/en-US/docs/Web/CSS/Specificity). +- {{CSSxRef(":where", ":where()")}} - Like `:is()`, but with 0 [specificity](/en-US/docs/Web/CSS/CSS_cascade/Specificity). - [Selector list](/en-US/docs/Web/CSS/Selector_list) - [Web components](/en-US/docs/Web/API/Web_components) diff --git a/files/en-us/web/css/_colon_not/index.md b/files/en-us/web/css/_colon_not/index.md index 8e862a56f37a749..c322bc79a99d787 100644 --- a/files/en-us/web/css/_colon_not/index.md +++ b/files/en-us/web/css/_colon_not/index.md @@ -28,7 +28,7 @@ The `:not()` pseudo-class requires a [selector list](/en-US/docs/Web/CSS/CSS_sel There are several unusual effects and outcomes when using `:not()` that you should keep in mind when using it: - Useless selectors can be written using this pseudo-class. For example, `:not(*)` matches any element which is not an element, which is obviously nonsense, so the accompanying rule will never be applied. -- This pseudo-class can increase the [specificity](/en-US/docs/Web/CSS/Specificity) of a rule. For example, `#foo:not(#bar)` will match the same element as the simpler `#foo`, but has the higher specificity of two `id` selectors. +- This pseudo-class can increase the [specificity](/en-US/docs/Web/CSS/CSS_cascade/Specificity) of a rule. For example, `#foo:not(#bar)` will match the same element as the simpler `#foo`, but has the higher specificity of two `id` selectors. - The specificity of the `:not()` pseudo-class is replaced by the specificity of the most specific selector in its comma-separated argument of selectors; providing the same specificity as if it had been written [`:not(:is(argument))`](/en-US/docs/Web/CSS/:is). - `:not(.foo)` will match anything that isn't `.foo`, _including {{HTMLElement("html")}} and {{HTMLElement("body")}}._ - This selector will match everything that is "not an X". This may be surprising when used with [descendant combinators](/en-US/docs/Web/CSS/Descendant_combinator), since there are multiple paths to select a target element. For instance, `body :not(table) a` will still apply to links inside a {{HTMLElement("table")}}, since {{HTMLElement("tr")}}, {{HTMLElement("tbody")}}, {{HTMLElement("th")}}, {{HTMLElement("td")}}, {{HTMLElement("caption")}}, etc. can all match the `:not(table)` part of the selector. To avoid this, you can use `body a:not(table a)` instead, which will only apply to links that are not descendants of a table. diff --git a/files/en-us/web/css/_colon_root/index.md b/files/en-us/web/css/_colon_root/index.md index 8ef27823ac46cf3..01be31f74d3c8f6 100644 --- a/files/en-us/web/css/_colon_root/index.md +++ b/files/en-us/web/css/_colon_root/index.md @@ -7,7 +7,7 @@ browser-compat: css.selectors.root {{CSSRef}} -The **`:root`** [CSS](/en-US/docs/Web/CSS) [pseudo-class](/en-US/docs/Web/CSS/Pseudo-classes) matches the root element of a tree representing the document. In HTML, `:root` represents the {{HTMLElement("html")}} element and is identical to the selector `html`, except that its [specificity](/en-US/docs/Web/CSS/Specificity) is higher. +The **`:root`** [CSS](/en-US/docs/Web/CSS) [pseudo-class](/en-US/docs/Web/CSS/Pseudo-classes) matches the root element of a tree representing the document. In HTML, `:root` represents the {{HTMLElement("html")}} element and is identical to the selector `html`, except that its [specificity](/en-US/docs/Web/CSS/CSS_cascade/Specificity) is higher. ```css /* Selects the root element of the document: diff --git a/files/en-us/web/css/_colon_where/index.md b/files/en-us/web/css/_colon_where/index.md index d1c0e4377d88dfb..eea38f8807eb3a1 100644 --- a/files/en-us/web/css/_colon_where/index.md +++ b/files/en-us/web/css/_colon_where/index.md @@ -9,7 +9,7 @@ browser-compat: css.selectors.where The **`:where()`** [CSS](/en-US/docs/Web/CSS) [pseudo-class](/en-US/docs/Web/CSS/Pseudo-classes) function takes a selector list as its argument, and selects any element that can be selected by one of the selectors in that list. -The difference between `:where()` and {{CSSxRef(":is", ":is()")}} is that `:where()` always has 0 [specificity](/en-US/docs/Web/CSS/Specificity), whereas `:is()` takes on the specificity of the most specific selector in its arguments. +The difference between `:where()` and {{CSSxRef(":is", ":is()")}} is that `:where()` always has 0 [specificity](/en-US/docs/Web/CSS/CSS_cascade/Specificity), whereas `:is()` takes on the specificity of the most specific selector in its arguments. {{EmbedInteractiveExample("pages/tabbed/pseudo-class-where.html", "tabbed-shorter")}} diff --git a/files/en-us/web/css/actual_value/index.md b/files/en-us/web/css/actual_value/index.md index 36525b4fa63a1f0..f78f3d3ffd23117 100644 --- a/files/en-us/web/css/actual_value/index.md +++ b/files/en-us/web/css/actual_value/index.md @@ -13,7 +13,7 @@ The **actual value** of a [CSS](/en-US/docs/Web/CSS) property is the [used value The {{glossary("user agent")}} performs four steps to calculate a property's actual (final) value: -1. First, the [specified value](/en-US/docs/Web/CSS/specified_value) is determined based on the result of [cascading](/en-US/docs/Web/CSS/Cascade), [inheritance](/en-US/docs/Web/CSS/Inheritance), or using the [initial value](/en-US/docs/Web/CSS/initial_value). +1. First, the [specified value](/en-US/docs/Web/CSS/specified_value) is determined based on the result of [cascading](/en-US/docs/Web/CSS/CSS_cascade/Cascade), [inheritance](/en-US/docs/Web/CSS/Inheritance), or using the [initial value](/en-US/docs/Web/CSS/initial_value). 2. Next, the [computed value](/en-US/docs/Web/CSS/computed_value) is calculated according to the specification (for example, a `span` with `position: absolute` will have its computed `display` changed to `block`). 3. Then, layout is calculated, resulting in the [used value](/en-US/docs/Web/CSS/used_value). 4. Finally, the used value is transformed according to the limitations of the local environment, resulting in the actual value. @@ -28,7 +28,7 @@ The {{glossary("user agent")}} performs four steps to calculate a property's act - [CSS syntax](/en-US/docs/Web/CSS/Syntax) - [At-rules](/en-US/docs/Web/CSS/At-rule) - [Comments](/en-US/docs/Web/CSS/Comments) - - [Specificity](/en-US/docs/Web/CSS/Specificity) + - [Specificity](/en-US/docs/Web/CSS/CSS_cascade/Specificity) - [Inheritance](/en-US/docs/Web/CSS/Inheritance) - [Box model](/en-US/docs/Web/CSS/CSS_box_model/Introduction_to_the_CSS_box_model) - [Layout modes](/en-US/docs/Web/CSS/Layout_mode) diff --git a/files/en-us/web/css/all/index.md b/files/en-us/web/css/all/index.md index 6606cf95b8f0969..83de851acd9d2a6 100644 --- a/files/en-us/web/css/all/index.md +++ b/files/en-us/web/css/all/index.md @@ -38,9 +38,9 @@ The `all` property is specified as one of the CSS global keyword values. Note th - : Specifies that all the element's properties should be changed to their inherited values if they inherit by default, or to their initial values if not. - {{cssxref("revert")}} - : Specifies behavior that depends on the stylesheet origin to which the declaration belongs: - - If the rule belongs to the [author origin](/en-US/docs/Web/CSS/Cascade#author_stylesheets), the `revert` value rolls back the [cascade](/en-US/docs/Web/CSS/Cascade) to the user level, so that the [specified values](/en-US/docs/Web/CSS/specified_value) are calculated as if no author-level rules were specified for the element. For purposes of `revert`, the author origin includes the Override and Animation origins. - - If the rule belongs to the [user origin](/en-US/docs/Web/CSS/Cascade#user_stylesheets), the `revert` value rolls back the [cascade](/en-US/docs/Web/CSS/Cascade) to the user-agent level, so that the [specified values](/en-US/docs/Web/CSS/specified_value) are calculated as if no author-level or user-level rules were specified for the element. - - If the rule belongs to the [user-agent origin](/en-US/docs/Web/CSS/Cascade#user-agent_stylesheets), the `revert` value acts like `unset`. + - If the rule belongs to the [author origin](/en-US/docs/Web/CSS/CSS_cascade/Cascade#author_stylesheets), the `revert` value rolls back the [cascade](/en-US/docs/Web/CSS/CSS_cascade/Cascade) to the user level, so that the [specified values](/en-US/docs/Web/CSS/specified_value) are calculated as if no author-level rules were specified for the element. For purposes of `revert`, the author origin includes the Override and Animation origins. + - If the rule belongs to the [user origin](/en-US/docs/Web/CSS/CSS_cascade/Cascade#user_stylesheets), the `revert` value rolls back the [cascade](/en-US/docs/Web/CSS/CSS_cascade/Cascade) to the user-agent level, so that the [specified values](/en-US/docs/Web/CSS/specified_value) are calculated as if no author-level or user-level rules were specified for the element. + - If the rule belongs to the [user-agent origin](/en-US/docs/Web/CSS/CSS_cascade/Cascade#user-agent_stylesheets), the `revert` value acts like `unset`. - {{cssxref("revert-layer")}} - : Specifies that all the element's properties should roll back the cascade to a previous [cascade layer](/en-US/docs/Web/CSS/@layer), if one exists. If no other cascade layer exists, the element's properties will roll back to the matching rule, if one exists, in the current layer or to a previous [style origin](/en-US/docs/Glossary/Style_origin). diff --git a/files/en-us/web/css/at-rule/index.md b/files/en-us/web/css/at-rule/index.md index 429e777214362e0..f017195befbf064 100644 --- a/files/en-us/web/css/at-rule/index.md +++ b/files/en-us/web/css/at-rule/index.md @@ -104,5 +104,5 @@ Block at-rules end in a `{}`-block that contain nested rules, other at-rules, or - [CSSRule](/en-US/docs/Web/API/CSSRule) interface - [CSS conditional rules](/en-US/docs/Web/CSS/CSS_conditional_rules) module - [CSS syntax](/en-US/docs/Web/CSS/Syntax) -- [Specificity](/en-US/docs/Web/CSS/Specificity) +- [Specificity](/en-US/docs/Web/CSS/CSS_cascade/Specificity) - [Inheritance](/en-US/docs/Web/CSS/Inheritance) diff --git a/files/en-us/web/css/comments/index.md b/files/en-us/web/css/comments/index.md index e54c41bf355f715..81ca041cf90b5ce 100644 --- a/files/en-us/web/css/comments/index.md +++ b/files/en-us/web/css/comments/index.md @@ -52,7 +52,7 @@ The `/* */` comment syntax is used for both single and multiline comments. There - [Syntax](/en-US/docs/Web/CSS/Syntax) guide - [Value definition syntax](/en-US/docs/Web/CSS/Value_definition_syntax) - [CSS error handling](/en-US/docs/Web/CSS/CSS_syntax/Error_handling) -- [Specificity](/en-US/docs/Web/CSS/Specificity) +- [Specificity](/en-US/docs/Web/CSS/CSS_cascade/Specificity) - [Inheritance](/en-US/docs/Web/CSS/Inheritance) - [Learn: Handling conflicts](/en-US/docs/Learn_web_development/Core/Styling_basics/Handling_conflicts) - [Learn: cascade layers](/en-US/docs/Learn_web_development/Core/Styling_basics/Cascade_layers) diff --git a/files/en-us/web/css/computed_value/index.md b/files/en-us/web/css/computed_value/index.md index 105a620d53c7361..67e43a2bec46739 100644 --- a/files/en-us/web/css/computed_value/index.md +++ b/files/en-us/web/css/computed_value/index.md @@ -30,7 +30,7 @@ However, for some properties (those where percentages are relative to something - [CSS syntax](/en-US/docs/Web/CSS/Syntax) - [At-rules](/en-US/docs/Web/CSS/At-rule) - [Comments](/en-US/docs/Web/CSS/Comments) - - [Specificity](/en-US/docs/Web/CSS/Specificity) + - [Specificity](/en-US/docs/Web/CSS/CSS_cascade/Specificity) - [Inheritance](/en-US/docs/Web/CSS/Inheritance) - [Box model](/en-US/docs/Web/CSS/CSS_box_model/Introduction_to_the_CSS_box_model) - [Layout modes](/en-US/docs/Web/CSS/Layout_mode) diff --git a/files/en-us/web/css/css_box_model/introduction_to_the_css_box_model/index.md b/files/en-us/web/css/css_box_model/introduction_to_the_css_box_model/index.md index 1d0a39995dfe477..1a10afc9d02e42c 100644 --- a/files/en-us/web/css/css_box_model/introduction_to_the_css_box_model/index.md +++ b/files/en-us/web/css/css_box_model/introduction_to_the_css_box_model/index.md @@ -41,13 +41,13 @@ Finally, note that for non-replaced inline elements, the amount of space taken u ## See also - [Layout and the containing block](/en-US/docs/Web/CSS/CSS_display/Containing_block) -- [Introducing the CSS Cascade](/en-US/docs/Web/CSS/Cascade) +- [Introducing the CSS Cascade](/en-US/docs/Web/CSS/CSS_cascade/Cascade) - [Learn: Handling conflicts](/en-US/docs/Learn_web_development/Core/Styling_basics/Handling_conflicts) - CSS key concepts: - [CSS syntax](/en-US/docs/Web/CSS/Syntax) - [At-rules](/en-US/docs/Web/CSS/At-rule) - [Comments](/en-US/docs/Web/CSS/Comments) - - [Specificity](/en-US/docs/Web/CSS/Specificity) + - [Specificity](/en-US/docs/Web/CSS/CSS_cascade/Specificity) - [Inheritance](/en-US/docs/Web/CSS/Inheritance) - [Layout modes](/en-US/docs/Web/CSS/Layout_mode) - [Visual formatting models](/en-US/docs/Web/CSS/Visual_formatting_model) diff --git a/files/en-us/web/css/css_box_model/mastering_margin_collapsing/index.md b/files/en-us/web/css/css_box_model/mastering_margin_collapsing/index.md index 03b889493cf0003..4de90c0aee3c5b3 100644 --- a/files/en-us/web/css/css_box_model/mastering_margin_collapsing/index.md +++ b/files/en-us/web/css/css_box_model/mastering_margin_collapsing/index.md @@ -76,7 +76,7 @@ p { - [CSS syntax](/en-US/docs/Web/CSS/Syntax) - [At-rules](/en-US/docs/Web/CSS/At-rule) - [Comments](/en-US/docs/Web/CSS/Comments) - - [Specificity](/en-US/docs/Web/CSS/Specificity) + - [Specificity](/en-US/docs/Web/CSS/CSS_cascade/Specificity) - [Inheritance](/en-US/docs/Web/CSS/Inheritance) - [Box model](/en-US/docs/Web/CSS/CSS_box_model/Introduction_to_the_CSS_box_model) - [Layout modes](/en-US/docs/Web/CSS/Layout_mode) diff --git a/files/en-us/web/css/cascade/index.md b/files/en-us/web/css/css_cascade/cascade/index.md similarity index 97% rename from files/en-us/web/css/cascade/index.md rename to files/en-us/web/css/css_cascade/cascade/index.md index eff21d3edbe617d..23512a8daf1d480 100644 --- a/files/en-us/web/css/cascade/index.md +++ b/files/en-us/web/css/css_cascade/cascade/index.md @@ -1,6 +1,6 @@ --- title: Introducing the CSS Cascade -slug: Web/CSS/Cascade +slug: Web/CSS/CSS_cascade/Cascade page-type: guide spec-urls: https://drafts.csswg.org/css-cascade/ --- @@ -9,7 +9,7 @@ spec-urls: https://drafts.csswg.org/css-cascade/ The **cascade** is an algorithm that defines how user agents combine property values originating from different sources. The cascade defines the origin and layer that takes precedence when declarations in more than one [origin](#origin_types), [cascade layer](/en-US/docs/Web/CSS/@layer), or {{CSSxRef("@scope")}} block set a value for a property on an element. -The cascade lies at the core of CSS, as emphasized by the name: _**Cascading**_ Style Sheets. When a [selector](/en-US/docs/Web/CSS/CSS_selectors) matches an element, the property value from the origin with the highest precedence gets applied, even if the selector from a lower precedence origin or layer has greater [specificity](/en-US/docs/Web/CSS/Specificity). +The cascade lies at the core of CSS, as emphasized by the name: _**Cascading**_ Style Sheets. When a [selector](/en-US/docs/Web/CSS/CSS_selectors) matches an element, the property value from the origin with the highest precedence gets applied, even if the selector from a lower precedence origin or layer has greater [specificity](/en-US/docs/Web/CSS/CSS_cascade/Specificity). This article explains what the cascade is and the order in which {{Glossary("CSS")}} [declarations](/en-US/docs/Web/API/CSSStyleDeclaration) cascade, covering cascade layers and origin type. Understanding origin precedence is key to understanding the cascade. @@ -27,7 +27,7 @@ Some browsers let users modify the user-agent stylesheet, but this is rare and n Although some constraints on user-agent stylesheets are set by the HTML specification, browsers have a lot of latitude: that means some differences exist between browsers. To simplify the development process, Web developers may use a CSS reset stylesheet, such as [normalize.css](https://github.com/necolas/normalize.css), which sets common properties values to a known state for all browsers before beginning to make alterations to suit their specific needs. -Unless the user-agent stylesheet includes an [`!important`](/en-US/docs/Web/CSS/Specificity#the_!important_exception) next to a property, making it "important", styles declared by author styles, including a reset stylesheet, take precedence over the user-agent styles, regardless of the specificity of the associated selector. +Unless the user-agent stylesheet includes an [`!important`](/en-US/docs/Web/CSS/CSS_cascade/Specificity#the_!important_exception) next to a property, making it "important", styles declared by author styles, including a reset stylesheet, take precedence over the user-agent styles, regardless of the specificity of the associated selector. ### Author stylesheets @@ -61,7 +61,7 @@ The cascading algorithm determines how to find the value to apply for each prope | 7 | user-agent (browser) | `!important` | | 8 | CSS transitions | | -3. **Specificity**: In case of equality with an origin, the [specificity](/en-US/docs/Web/CSS/Specificity) of a rule is considered to choose one value or another. The specificity of the selectors are compared, and the declaration with the highest specificity wins. +3. **Specificity**: In case of equality with an origin, the [specificity](/en-US/docs/Web/CSS/CSS_cascade/Specificity) of a rule is considered to choose one value or another. The specificity of the selectors are compared, and the declaration with the highest specificity wins. 4. **Scoping proximity**: When two selectors in the origin layer with precedence have the same specificity, the property value within scoped rules with the smallest number of hops up the DOM hierarchy to the scope root wins. See [How `@scope` conflicts are resolved](/en-US/docs/Web/CSS/@scope#how_scope_conflicts_are_resolved) for more details and an example. 5. **Order of appearance**: In the origin with precedence, if there are competing values for a property that are in style block matching selectors of equal specificity and scoping proximity, the last declaration in the style order is applied. @@ -73,7 +73,7 @@ The cascade is in ascending order, meaning: > **Note:** **Transitions and animations** > -> Property values set by animation {{cssxref('@keyframes')}} are more important than all normal styles (those with no [`!important`](/en-US/docs/Web/CSS/Specificity#the_!important_exception) set). +> Property values set by animation {{cssxref('@keyframes')}} are more important than all normal styles (those with no [`!important`](/en-US/docs/Web/CSS/CSS_cascade/Specificity#the_!important_exception) set). > > Property values being set in a {{cssxref('transition')}} take precedence over all other values set, even those marked with `!important`. @@ -418,7 +418,7 @@ After your content has finished altering styles, it may find itself in a situati - [Learn: cascade layers](/en-US/docs/Learn_web_development/Core/Styling_basics/Cascade_layers) - [CSS cascading and inheritance](/en-US/docs/Web/CSS/CSS_cascade) module - [CSS syntax](/en-US/docs/Web/CSS/Syntax) -- [Specificity](/en-US/docs/Web/CSS/Specificity) +- [Specificity](/en-US/docs/Web/CSS/CSS_cascade/Specificity) - [Inheritance](/en-US/docs/Web/CSS/Inheritance) - [At-rules](/en-US/docs/Web/CSS/At-rule) - [Initial](/en-US/docs/Web/CSS/initial_value), [computed](/en-US/docs/Web/CSS/computed_value), [used](/en-US/docs/Web/CSS/used_value), and [actual](/en-US/docs/Web/CSS/actual_value) values diff --git a/files/en-us/web/css/css_cascade/index.md b/files/en-us/web/css/css_cascade/index.md index 4123071e514048c..cc85a6624e08d31 100644 --- a/files/en-us/web/css/css_cascade/index.md +++ b/files/en-us/web/css/css_cascade/index.md @@ -48,8 +48,8 @@ The opposite also occurs. Sometimes there are no declarations defining the value ### Key concepts and definitions -- {{cssxref("Specificity")}} -- [Cascade origin and importance](/en-US/docs/Web/CSS/Cascade) +- [specificity](/en-US/docs/Web/CSS/CSS_cascade/Specificity) +- [Cascade origin and importance](/en-US/docs/Web/CSS/CSS_cascade/Cascade) - [Values](/en-US/docs/Web/CSS/Value_definition_syntax) - [actual value](/en-US/docs/Web/CSS/actual_value) - [computed value](/en-US/docs/Web/CSS/computed_value) @@ -57,10 +57,10 @@ The opposite also occurs. Sometimes there are no declarations defining the value - [resolved value](/en-US/docs/Web/CSS/resolved_value) - [specified value](/en-US/docs/Web/CSS/specified_value) - [used value](/en-US/docs/Web/CSS/used_value) -- [Origin types](/en-US/docs/Web/CSS/Cascade#origin_types) - - [user-agent origin](/en-US/docs/Web/CSS/Cascade#user-agent_stylesheets) - - [author origin](/en-US/docs/Web/CSS/Cascade#author_stylesheets) - - [user origin](/en-US/docs/Web/CSS/Cascade#user_stylesheets) +- [Origin types](/en-US/docs/Web/CSS/CSS_cascade/Cascade#origin_types) + - [user-agent origin](/en-US/docs/Web/CSS/CSS_cascade/Cascade#user-agent_stylesheets) + - [author origin](/en-US/docs/Web/CSS/CSS_cascade/Cascade#author_stylesheets) + - [user origin](/en-US/docs/Web/CSS/CSS_cascade/Cascade#user_stylesheets) - [Declaring layers](/en-US/docs/Web/CSS/@import#importing_css_rules_into_a_cascade_layer) - [named layer](/en-US/docs/Learn_web_development/Core/Styling_basics/Cascade_layers#the_layer_statement_at-rule_for_named_layers) - [anonymous layer](/en-US/docs/Learn_web_development/Core/Styling_basics/Cascade_layers#the_layer_block_at-rule_for_named_and_anonymous_layers) @@ -68,7 +68,7 @@ The opposite also occurs. Sometimes there are no declarations defining the value ## Guides -- [Introducing the CSS Cascade](/en-US/docs/Web/CSS/Cascade) +- [Introducing the CSS Cascade](/en-US/docs/Web/CSS/CSS_cascade/Cascade) - : Guide to the cascade algorithm that defines how user agents combine property values originating from different sources. @@ -78,7 +78,7 @@ The opposite also occurs. Sometimes there are no declarations defining the value - [Learn: Cascade layers](/en-US/docs/Learn_web_development/Core/Styling_basics/Cascade_layers) - - : Introduction to [cascade layers](/en-US/docs/Web/CSS/@layer), a more advanced feature that builds on the fundamental concepts of the [CSS cascade](/en-US/docs/Web/CSS/Cascade) and [CSS specificity](/en-US/docs/Web/CSS/Specificity). + - : Introduction to [cascade layers](/en-US/docs/Web/CSS/@layer), a more advanced feature that builds on the fundamental concepts of the [CSS cascade](/en-US/docs/Web/CSS/CSS_cascade/Cascade) and [CSS specificity](/en-US/docs/Web/CSS/CSS_cascade/Specificity). - [CSS inheritance](/en-US/docs/Web/CSS/Inheritance) - : A guide to CSS inheritance. @@ -86,7 +86,7 @@ The opposite also occurs. Sometimes there are no declarations defining the value ## Related concepts - [Element-attached styles](/en-US/docs/Web/HTML/Global_attributes/style) -- [Inline styles and the cascade](/en-US/docs/Web/CSS/Cascade#inline_styles) +- [Inline styles and the cascade](/en-US/docs/Web/CSS/CSS_cascade/Cascade#inline_styles) - [Conditional rules for @imports](/en-US/docs/Web/CSS/@import#importing_css_rules_conditional_on_media_queries) ## Specifications diff --git a/files/en-us/web/css/specificity/index.md b/files/en-us/web/css/css_cascade/specificity/index.md similarity index 97% rename from files/en-us/web/css/specificity/index.md rename to files/en-us/web/css/css_cascade/specificity/index.md index 1be420956ea0b83..7ec7cd0dff83db2 100644 --- a/files/en-us/web/css/specificity/index.md +++ b/files/en-us/web/css/css_cascade/specificity/index.md @@ -1,6 +1,6 @@ --- title: Specificity -slug: Web/CSS/Specificity +slug: Web/CSS/CSS_cascade/Specificity page-type: guide spec-urls: https://drafts.csswg.org/selectors/#specificity-rules --- @@ -10,7 +10,7 @@ spec-urls: https://drafts.csswg.org/selectors/#specificity-rules **Specificity** is the algorithm used by browsers to determine the [CSS declaration](/en-US/docs/Learn_web_development/Core/Styling_basics/What_is_CSS#css_syntax_basics) that is the most relevant to an element, which in turn, determines the property value to apply to the element. The specificity algorithm calculates the weight of a [CSS selector](/en-US/docs/Web/CSS/Reference#selectors) to determine which rule from competing CSS declarations gets applied to an element. > [!NOTE] -> Browsers consider specificity **after** determining [cascade origin and importance](/en-US/docs/Web/CSS/Cascade). In other words, for competing property declarations, specificity is relevant and compared only between selectors from the one [cascade origin and layer](/en-US/docs/Web/CSS/@layer) that has precedence for the property. [Scoping proximity](/en-US/docs/Web/CSS/@scope#how_scope_conflicts_are_resolved) and order of appearance become relevant when the selector specificities of the competing declarations in the cascade layer with precedence are equal. +> Browsers consider specificity **after** determining [cascade origin and importance](/en-US/docs/Web/CSS/CSS_cascade/Cascade). In other words, for competing property declarations, specificity is relevant and compared only between selectors from the one [cascade origin and layer](/en-US/docs/Web/CSS/@layer) that has precedence for the property. [Scoping proximity](/en-US/docs/Web/CSS/@scope#how_scope_conflicts_are_resolved) and order of appearance become relevant when the selector specificities of the competing declarations in the cascade layer with precedence are equal. ## How is specificity calculated? @@ -208,7 +208,7 @@ Make sure to include a comment with every inclusion of the important flag so cod ### The `!important` exception -CSS declarations marked as important override any other declarations within the same cascade layer and origin. Although technically, [`!important`](/en-US/docs/Web/CSS/important) has nothing to do with specificity, it interacts directly with specificity and the cascade. It reverses the [cascade](/en-US/docs/Web/CSS/Cascade) order of stylesheets. +CSS declarations marked as important override any other declarations within the same cascade layer and origin. Although technically, [`!important`](/en-US/docs/Web/CSS/important) has nothing to do with specificity, it interacts directly with specificity and the cascade. It reverses the [cascade](/en-US/docs/Web/CSS/CSS_cascade/Cascade) order of stylesheets. If declarations from the same origin and cascade layer conflict and one property value has the `!important` flag set, the important declaration is applied no matter the specificity. When conflicting declarations from the same origin and cascade layer with the `!important` flag are applied to the same element, the declaration with a greater specificity is applied. @@ -475,7 +475,7 @@ When multiple declarations have equal specificity, the last declaration found in A few things to remember about specificity: -1. Specificity only applies when the same element is targeted by multiple declarations in the same cascade layer or origin. Specificity only matters for declarations of the same importance and same origin and [cascade layer](/en-US/docs/Web/CSS/@layer). If matching selectors are in different origins, the [cascade](/en-US/docs/Web/CSS/Cascade) determines which declaration takes precedence. +1. Specificity only applies when the same element is targeted by multiple declarations in the same cascade layer or origin. Specificity only matters for declarations of the same importance and same origin and [cascade layer](/en-US/docs/Web/CSS/@layer). If matching selectors are in different origins, the [cascade](/en-US/docs/Web/CSS/CSS_cascade/Cascade) determines which declaration takes precedence. 2. When two selectors in the same cascade layer and origin have the same specificity, scoping proximity is then calculated; the ruleset with the lowest scoping proximity wins. See [How `@scope` conflicts are resolved](/en-US/docs/Web/CSS/@scope#how_scope_conflicts_are_resolved) for more details and an example. diff --git a/files/en-us/web/css/css_cascading_variables/using_css_custom_properties/index.md b/files/en-us/web/css/css_cascading_variables/using_css_custom_properties/index.md index b75d12d90c0f3a9..979546dc91cdff2 100644 --- a/files/en-us/web/css/css_cascading_variables/using_css_custom_properties/index.md +++ b/files/en-us/web/css/css_cascading_variables/using_css_custom_properties/index.md @@ -10,7 +10,7 @@ page-type: guide Complex websites have very large amounts of CSS, and this often results in a lot of repeated CSS values. For example, it's common to see the same color used in hundreds of different places in stylesheets. Changing a color that's been duplicated in many places requires a search and replace across all rules and CSS files. Custom properties allow a value to be defined in one place, then referenced in multiple other places so that it's easier to work with. Another benefit is readability and semantics. For example, `--main-text-color` is easier to understand than the hexadecimal color `#00ff00`, especially if the color is used in different contexts. -Custom properties defined [using two dashes (`--`)](/en-US/docs/Web/CSS/--*) are subject to the [cascade](/en-US/docs/Web/CSS/Cascade) and inherit their value from their parent. +Custom properties defined [using two dashes (`--`)](/en-US/docs/Web/CSS/--*) are subject to the [cascade](/en-US/docs/Web/CSS/CSS_cascade/Cascade) and inherit their value from their parent. The {{cssxref("@property")}} at-rule allows more control over the custom property and lets you specify whether it inherits its value from a parent, what the initial value is, and the type constraints that should apply. > [!NOTE] diff --git a/files/en-us/web/css/css_display/block_formatting_context/index.md b/files/en-us/web/css/css_display/block_formatting_context/index.md index a9016f24d63a804..7ba276efb843663 100644 --- a/files/en-us/web/css/css_display/block_formatting_context/index.md +++ b/files/en-us/web/css/css_display/block_formatting_context/index.md @@ -228,7 +228,7 @@ In this example, we wrap the second `
` in an outer `
`, and create a ne ## See also - [CSS syntax](/en-US/docs/Web/CSS/Syntax) -- [Specificity](/en-US/docs/Web/CSS/Specificity) +- [Specificity](/en-US/docs/Web/CSS/CSS_cascade/Specificity) - [Inheritance](/en-US/docs/Web/CSS/Inheritance) - [Box model](/en-US/docs/Web/CSS/CSS_box_model/Introduction_to_the_CSS_box_model) - [Layout modes](/en-US/docs/Web/CSS/Layout_mode) diff --git a/files/en-us/web/css/css_media_queries/printing/index.md b/files/en-us/web/css/css_media_queries/printing/index.md index cb4ca7a47024126..8102a92406d74e6 100644 --- a/files/en-us/web/css/css_media_queries/printing/index.md +++ b/files/en-us/web/css/css_media_queries/printing/index.md @@ -27,7 +27,7 @@ Add the following to your {{HTMLElement("head")}} tag. You can use the CSS {{cssxref("@media")}} at-rule to set different styles for your webpage when it is printed on paper or as a PDF versus when it is displayed on the screen. The `print` [media type](/en-US/docs/Web/CSS/@media#media_types) sets the styles for printed media; these styles will only be used for printed content. -Add this at the end of your stylesheet. Note that [specificity](/en-US/docs/Web/CSS/Specificity) and precedence rules still apply: +Add this at the end of your stylesheet. Note that [specificity](/en-US/docs/Web/CSS/CSS_cascade/Specificity) and precedence rules still apply: ```css @media print { diff --git a/files/en-us/web/css/css_nesting/index.md b/files/en-us/web/css/css_nesting/index.md index 100583b2c4cf2ee..ae7c8d4da695181 100644 --- a/files/en-us/web/css/css_nesting/index.md +++ b/files/en-us/web/css/css_nesting/index.md @@ -40,6 +40,6 @@ CSS nesting helps with the readability, modularity, and maintainability of CSS s ## See also -- [Specificity](/en-US/docs/Web/CSS/Specificity) +- [Specificity](/en-US/docs/Web/CSS/CSS_cascade/Specificity) - [CSS cascading and inheritance module](/en-US/docs/Web/CSS/CSS_cascade) - [CSS selectors module](/en-US/docs/Web/CSS/CSS_selectors) diff --git a/files/en-us/web/css/css_nesting/nesting_and_specificity/index.md b/files/en-us/web/css/css_nesting/nesting_and_specificity/index.md index fb67171b49dc423..e3320253bc38836 100644 --- a/files/en-us/web/css/css_nesting/nesting_and_specificity/index.md +++ b/files/en-us/web/css/css_nesting/nesting_and_specificity/index.md @@ -6,7 +6,7 @@ page-type: guide {{CSSRef}} -The {{cssxref('specificity')}} of the `&` nesting selector is calculated using the largest specificity in the associated selector list. This is identical to how specificity is calculated when using the {{cssxref(':is',':is()')}} function. +The [specificity](/en-US/docs/Web/CSS/CSS_cascade/Specificity) of the `&` nesting selector is calculated using the largest specificity in the associated selector list. This is identical to how specificity is calculated when using the {{cssxref(':is',':is()')}} function. ```html @@ -42,7 +42,7 @@ The {{cssxref('specificity')}} of the `&` nesting selector is calculated using t } ``` -In this example, the id selector (`#a`) has a specificity of [`1-0-0`](/en-US/docs/Web/CSS/Specificity#selector_weight_categories), while the type selector (`b`) has a specificity of `0-0-1`. The [`&` nesting selector](/en-US/docs/Web/CSS/Nesting_selector) and `:is()` pseudo-class both take a specificity of `1-0-0`, even though the `#a` id selector is never used. +In this example, the id selector (`#a`) has a specificity of [`1-0-0`](/en-US/docs/Web/CSS/CSS_cascade/Specificity#selector_weight_categories), while the type selector (`b`) has a specificity of `0-0-1`. The [`&` nesting selector](/en-US/docs/Web/CSS/Nesting_selector) and `:is()` pseudo-class both take a specificity of `1-0-0`, even though the `#a` id selector is never used. The `.foo` class selector has a specificity of `0-1-0`. This makes the total specificity `1-0-1` for `& c` and `0-1-1` for `.foo c`, meaning that `color: blue;` wins out. diff --git a/files/en-us/web/css/css_pseudo-elements/index.md b/files/en-us/web/css/css_pseudo-elements/index.md index e2c93de75a64bb9..03acfb64cffa7e1 100644 --- a/files/en-us/web/css/css_pseudo-elements/index.md +++ b/files/en-us/web/css/css_pseudo-elements/index.md @@ -114,7 +114,7 @@ The specification also defines the `::details-content` and `::search-text` pseud ## See also -- [Specificity](/en-US/docs/Web/CSS/Specificity) +- [Specificity](/en-US/docs/Web/CSS/CSS_cascade/Specificity) - [CSS selectors](/en-US/docs/Web/CSS/CSS_selectors) module - [CSS shadow-parts](/en-US/docs/Web/CSS/CSS_shadow_parts) module - [CSS generated content](/en-US/docs/Web/CSS/CSS_generated_content) module diff --git a/files/en-us/web/css/css_selectors/index.md b/files/en-us/web/css/css_selectors/index.md index a73fa1b3228dbcf..172ec40fa010a4f 100644 --- a/files/en-us/web/css/css_selectors/index.md +++ b/files/en-us/web/css/css_selectors/index.md @@ -7,7 +7,7 @@ spec-urls: https://drafts.csswg.org/selectors/ {{CSSRef}} -The **CSS selectors** module defines the patterns to select elements to which a set of CSS rules are then applied along with their {{cssxref("specificity")}}. The CSS selectors module provides us with more than 60 selectors and five combinators. [Other modules](#related_concepts) provide additional pseudo-class selectors and pseudo-elements. +The **CSS selectors** module defines the patterns to select elements to which a set of CSS rules are then applied along with their [specificity](/en-US/docs/Web/CSS/CSS_cascade/Specificity). The CSS selectors module provides us with more than 60 selectors and five combinators. [Other modules](#related_concepts) provide additional pseudo-class selectors and pseudo-elements. In CSS, selectors are patterns used to match, or select, the elements you want to style. Selectors are also used in JavaScript to enable selecting the DOM nodes to return as a [`NodeList`](/en-US/docs/Web/API/NodeList). @@ -107,7 +107,7 @@ Selectors, whether used in CSS or JavaScript, enable targeting HTML elements bas - [Complex selector](/en-US/docs/Web/CSS/CSS_selectors/Selector_structure#complex_selector) - [Relative selector](/en-US/docs/Web/CSS/CSS_selectors/Selector_structure#relative_selector) - [Selector list](/en-US/docs/Web/CSS/Selector_list) -- [Specificity](/en-US/docs/Web/CSS/Specificity) +- [Specificity](/en-US/docs/Web/CSS/CSS_cascade/Specificity) ## Guides @@ -181,8 +181,8 @@ Selectors, whether used in CSS or JavaScript, enable targeting HTML elements bas - {{CSSXref("@namespace")}} at-rule - {{cssxref("important", "!important")}} -- [Specificity](/en-US/docs/Web/CSS/Specificity) -- [Cascade](/en-US/docs/Web/CSS/Cascade) +- [Specificity](/en-US/docs/Web/CSS/CSS_cascade/Specificity) +- [Cascade](/en-US/docs/Web/CSS/CSS_cascade/Cascade) - {{domxref("Document.querySelector")}} method - {{domxref("Document.querySelectorAll")}} method diff --git a/files/en-us/web/css/css_selectors/selectors_and_combinators/index.md b/files/en-us/web/css/css_selectors/selectors_and_combinators/index.md index 002ae6219b8d32c..42d8eeffc04cfb5 100644 --- a/files/en-us/web/css/css_selectors/selectors_and_combinators/index.md +++ b/files/en-us/web/css/css_selectors/selectors_and_combinators/index.md @@ -218,5 +218,5 @@ See the [pseudo-classes](/en-US/docs/Web/CSS/Pseudo-classes#specifications) and - [Selector list](/en-US/docs/Web/CSS/Selector_list) - [CSS selector structure](/en-US/docs/Web/CSS/CSS_selectors/Selector_structure) -- [Specificity](/en-US/docs/Web/CSS/Specificity) +- [Specificity](/en-US/docs/Web/CSS/CSS_cascade/Specificity) - [CSS nesting module](/en-US/docs/Web/CSS/CSS_nesting) diff --git a/files/en-us/web/css/css_syntax/index.md b/files/en-us/web/css/css_syntax/index.md index b0d6860b3690edc..16fc1bca2356a62 100644 --- a/files/en-us/web/css/css_syntax/index.md +++ b/files/en-us/web/css/css_syntax/index.md @@ -60,7 +60,7 @@ This module doesn't define any properties, [data types](/en-US/docs/Web/CSS/CSS_ [CSS selectors](/en-US/docs/Web/CSS/CSS_selectors) module: -- [CSS specificity](/en-US/docs/Web/CSS/Specificity) +- [CSS specificity](/en-US/docs/Web/CSS/CSS_cascade/Specificity) [CSS cascading and inheritance](/en-US/docs/Web/CSS/CSS_cascade) module: diff --git a/files/en-us/web/css/forced-color-adjust/index.md b/files/en-us/web/css/forced-color-adjust/index.md index b1efeca3c9c38e1..5d1b9f9c76362df 100644 --- a/files/en-us/web/css/forced-color-adjust/index.md +++ b/files/en-us/web/css/forced-color-adjust/index.md @@ -33,7 +33,7 @@ The `forced-color-adjust` property's value must be one of the following keywords - `none` - : The element's colors are not automatically adjusted by the {{Glossary("user agent")}} in forced colors mode. - `preserve-parent-color` - - : In forced colors mode, if the {{cssxref("color")}} property inherits from its parent (i.e. there is no [cascaded value](/en-US/docs/Web/CSS/Cascade) or the cascaded value is `currentcolor`, {{cssxref("inherit")}}, or another keyword that inherits from the parent), then it computes to the [used color](/en-US/docs/Web/CSS/used_value) of its parent's `color` property. In all other cases, it behaves the same as `none`. + - : In forced colors mode, if the {{cssxref("color")}} property inherits from its parent (i.e. there is no [cascaded value](/en-US/docs/Web/CSS/CSS_cascade/Cascade) or the cascaded value is `currentcolor`, {{cssxref("inherit")}}, or another keyword that inherits from the parent), then it computes to the [used color](/en-US/docs/Web/CSS/used_value) of its parent's `color` property. In all other cases, it behaves the same as `none`. ## Usage notes diff --git a/files/en-us/web/css/important/index.md b/files/en-us/web/css/important/index.md index 888d251b80b4198..2ef5981013955dd 100644 --- a/files/en-us/web/css/important/index.md +++ b/files/en-us/web/css/important/index.md @@ -6,7 +6,7 @@ page-type: css-keyword {{CSSRef}} -A `!` delimiter followed by the `important` keyword marks the declaration as important. The `!important` flag alters the rules selecting declarations inside the [cascade](/en-US/docs/Web/CSS/Cascade). A declaration that is not _important_ is called _normal_. +A `!` delimiter followed by the `important` keyword marks the declaration as important. The `!important` flag alters the rules selecting declarations inside the [cascade](/en-US/docs/Web/CSS/CSS_cascade/Cascade). A declaration that is not _important_ is called _normal_. To mark a declaration important, add the _important flag_ (`!important`) after the value in the declaration. While white space is allowed between the delimiter and the keyword, the flag is generally written as `!important` without any white space. @@ -22,7 +22,7 @@ The `!important` comes after the value of the property value pair declaration, p ## Impact on the cascade -When it comes to important declarations, the [cascade origin and layer orders](/en-US/docs/Web/CSS/Cascade) are reversed. Without the important flag, declarations in the author's style sheets override declarations in a user's style sheet, which override declarations in the user-agent's default style sheet. +When it comes to important declarations, the [cascade origin and layer orders](/en-US/docs/Web/CSS/CSS_cascade/Cascade) are reversed. Without the important flag, declarations in the author's style sheets override declarations in a user's style sheet, which override declarations in the user-agent's default style sheet. When a declaration is important, the order of precedence is reversed. Declarations marked as important in the user-agent style sheets override all important declarations in the user style sheets. Similarly, all important declarations in the user style sheets override all important declarations in the author's style sheets. Finally, all important declarations take precedence over all animations. @@ -57,7 +57,7 @@ Inline styles are styles defined using the [`style`](/en-US/docs/Web/HTML/Global ### !important and specificity -While `!important` is not part of determining specificity, it is related. Important declarations override all other declarations from the same [origin and cascade layer](/en-US/docs/Web/CSS/Cascade). +While `!important` is not part of determining specificity, it is related. Important declarations override all other declarations from the same [origin and cascade layer](/en-US/docs/Web/CSS/CSS_cascade/Cascade). ```css #myElement#myElement#myElement .myClass.myClass p:hover { @@ -69,7 +69,7 @@ p { } ``` -This example displays a case of over-specifying a selector. No matter how high the selector [specificity](/en-US/docs/Web/CSS/Specificity) matches a normal declaration, an important declaration from the same source and cascade layer will always have precedence. In this case, the paragraph will always be red. +This example displays a case of over-specifying a selector. No matter how high the selector [specificity](/en-US/docs/Web/CSS/CSS_cascade/Specificity) matches a normal declaration, an important declaration from the same source and cascade layer will always have precedence. In this case, the paragraph will always be red. When two important declarations from the same origin and layer apply to the same element, browsers select and use the declaration with the highest specificity. @@ -153,5 +153,5 @@ This feature is supported in all browsers. ## See also -- [CSS Specificity](/en-US/docs/Web/CSS/Specificity) -- [CSS Cascade](/en-US/docs/Web/CSS/Cascade) +- [CSS Specificity](/en-US/docs/Web/CSS/CSS_cascade/Specificity) +- [CSS Cascade](/en-US/docs/Web/CSS/CSS_cascade/Cascade) diff --git a/files/en-us/web/css/index.md b/files/en-us/web/css/index.md index ded5727fd751df3..773250251e09a09 100644 --- a/files/en-us/web/css/index.md +++ b/files/en-us/web/css/index.md @@ -28,7 +28,7 @@ After CSS 2.1, the scope of the specification increased significantly and the pr The [CSS reference](/en-US/docs/Web/CSS/Reference) is an exhaustive reference for seasoned Web developers, describing every property and concept of CSS, including: - The [syntax and forms of the language](/en-US/docs/Web/CSS/Syntax) -- [Specificity](/en-US/docs/Web/CSS/Specificity), [inheritance](/en-US/docs/Web/CSS/Inheritance), and [the cascade](/en-US/docs/Web/CSS/Cascade) +- [Specificity](/en-US/docs/Web/CSS/CSS_cascade/Specificity), [inheritance](/en-US/docs/Web/CSS/Inheritance), and [the cascade](/en-US/docs/Web/CSS/CSS_cascade/Cascade) - [CSS selectors](/en-US/docs/Web/CSS/CSS_selectors), including [pseudo-elements](/en-US/docs/Web/CSS/CSS_pseudo-elements), [nesting](/en-US/docs/Web/CSS/CSS_nesting), [scoping](/en-US/docs/Web/CSS/CSS_scoping) and [shadow parts](/en-US/docs/Web/CSS/CSS_shadow_parts) - [CSS at-rules](/en-US/docs/Web/CSS/At-rule), including [media](/en-US/docs/Web/CSS/CSS_media_queries) and [container](/en-US/docs/Web/CSS/CSS_containment) queries - [CSS units and values](/en-US/docs/Web/CSS/CSS_Values_and_Units) and [functional notations](/en-US/docs/Web/CSS/CSS_Functions) diff --git a/files/en-us/web/css/inheritance/index.md b/files/en-us/web/css/inheritance/index.md index dd27faecffc2b6a..b5c40bde91c9823 100644 --- a/files/en-us/web/css/inheritance/index.md +++ b/files/en-us/web/css/inheritance/index.md @@ -97,7 +97,7 @@ We can see here another border around the word "emphasized text". - CSS values for controlling inheritance: [`inherit`](/en-US/docs/Web/CSS/inherit), [`initial`](/en-US/docs/Web/CSS/initial), [`revert`](/en-US/docs/Web/CSS/revert), [`revert-layer`](/en-US/docs/Web/CSS/revert-layer), and [`unset`](/en-US/docs/Web/CSS/unset) - [CSS error handling](/en-US/docs/Web/CSS/CSS_syntax/Error_handling) -- [Introducing the CSS cascade](/en-US/docs/Web/CSS/Cascade) +- [Introducing the CSS cascade](/en-US/docs/Web/CSS/CSS_cascade/Cascade) - [Learn: Handling conflicts](/en-US/docs/Learn_web_development/Core/Styling_basics/Handling_conflicts) - [Learn: cascade layers](/en-US/docs/Learn_web_development/Core/Styling_basics/Cascade_layers) - [CSS cascading and inheritance](/en-US/docs/Web/CSS/CSS_cascade) module diff --git a/files/en-us/web/css/initial_value/index.md b/files/en-us/web/css/initial_value/index.md index 989ec4eae25c2ec..89301b51c656f93 100644 --- a/files/en-us/web/css/initial_value/index.md +++ b/files/en-us/web/css/initial_value/index.md @@ -28,7 +28,7 @@ You can explicitly specify the initial value by using the {{cssxref("initial")}} - [CSS syntax](/en-US/docs/Web/CSS/Syntax) - [At-rules](/en-US/docs/Web/CSS/At-rule) - [Comments](/en-US/docs/Web/CSS/Comments) - - [Specificity](/en-US/docs/Web/CSS/Specificity) + - [Specificity](/en-US/docs/Web/CSS/CSS_cascade/Specificity) - [Inheritance](/en-US/docs/Web/CSS/Inheritance) - [Box model](/en-US/docs/Web/CSS/CSS_box_model/Introduction_to_the_CSS_box_model) - [Layout modes](/en-US/docs/Web/CSS/Layout_mode) diff --git a/files/en-us/web/css/layout_mode/index.md b/files/en-us/web/css/layout_mode/index.md index bc3d7c24f8c475a..48aef3cee552e84 100644 --- a/files/en-us/web/css/layout_mode/index.md +++ b/files/en-us/web/css/layout_mode/index.md @@ -25,7 +25,7 @@ A [CSS](/en-US/docs/Web/CSS) **layout mode**, sometimes called _layout_, is an a - [CSS syntax](/en-US/docs/Web/CSS/Syntax) - [At-rules](/en-US/docs/Web/CSS/At-rule) - [Comments](/en-US/docs/Web/CSS/Comments) - - [Specificity](/en-US/docs/Web/CSS/Specificity) + - [Specificity](/en-US/docs/Web/CSS/CSS_cascade/Specificity) - [Inheritance](/en-US/docs/Web/CSS/Inheritance) - [Box model](/en-US/docs/Web/CSS/CSS_box_model/Introduction_to_the_CSS_box_model) - [Visual formatting models](/en-US/docs/Web/CSS/Visual_formatting_model) diff --git a/files/en-us/web/css/position-area/index.md b/files/en-us/web/css/position-area/index.md index f5cf58c51478422..5839ea3c7c34503 100644 --- a/files/en-us/web/css/position-area/index.md +++ b/files/en-us/web/css/position-area/index.md @@ -153,7 +153,7 @@ The HTML includes a {{htmlelement("div")}} and a {{htmlelement("p")}}. The `

` We convert the `

` to an anchor element with the {{cssxref("anchor-name")}} property. We then associate the absolutely-positioned `

` with it by setting its {{cssxref("position-anchor")}} value to the same anchor name. -We set the initial `position-area` value to `top center`. This value is set on a `p` selector, so the value has less [specificity](/en-US/docs/Web/CSS/Specificity) than any value added to the `