From e272cdb29d8753b5830515bbdee5cb6292a2b3a5 Mon Sep 17 00:00:00 2001 From: estelle Date: Wed, 12 Feb 2025 00:16:20 -0800 Subject: [PATCH 1/2] Move specificity under cascade --- files/en-us/_redirects.txt | 3 +- files/en-us/_wikihistory.json | 106 +++++++++--------- .../styling_basics/cascade_layers/index.md | 10 +- .../handling_conflicts/index.md | 4 +- .../core/styling_basics/index.md | 2 +- .../howto/solve_css_problems/css_faq/index.md | 2 +- files/en-us/mdn/tutorials/index.md | 2 +- .../@media/prefers-reduced-motion/index.md | 2 +- files/en-us/web/css/@scope/index.md | 2 +- files/en-us/web/css/@starting-style/index.md | 2 +- files/en-us/web/css/_colon_has/index.md | 2 +- .../web/css/_colon_host-context/index.md | 2 +- files/en-us/web/css/_colon_is/index.md | 2 +- files/en-us/web/css/_colon_not/index.md | 2 +- files/en-us/web/css/_colon_root/index.md | 2 +- files/en-us/web/css/_colon_where/index.md | 2 +- files/en-us/web/css/actual_value/index.md | 2 +- files/en-us/web/css/at-rule/index.md | 2 +- files/en-us/web/css/cascade/index.md | 10 +- files/en-us/web/css/comments/index.md | 2 +- files/en-us/web/css/computed_value/index.md | 2 +- .../index.md | 2 +- .../mastering_margin_collapsing/index.md | 2 +- files/en-us/web/css/css_cascade/index.md | 4 +- .../{ => css_cascade}/specificity/index.md | 2 +- .../block_formatting_context/index.md | 2 +- .../css/css_media_queries/printing/index.md | 2 +- files/en-us/web/css/css_nesting/index.md | 2 +- .../nesting_and_specificity/index.md | 4 +- .../web/css/css_pseudo-elements/index.md | 2 +- files/en-us/web/css/css_selectors/index.md | 6 +- .../selectors_and_combinators/index.md | 2 +- files/en-us/web/css/css_syntax/index.md | 2 +- files/en-us/web/css/important/index.md | 4 +- files/en-us/web/css/index.md | 2 +- files/en-us/web/css/initial_value/index.md | 2 +- files/en-us/web/css/layout_mode/index.md | 2 +- files/en-us/web/css/position-area/index.md | 2 +- files/en-us/web/css/reference/index.md | 2 +- files/en-us/web/css/replaced_element/index.md | 2 +- files/en-us/web/css/resolved_value/index.md | 2 +- files/en-us/web/css/revert/index.md | 2 +- .../web/css/shorthand_properties/index.md | 2 +- files/en-us/web/css/specified_value/index.md | 2 +- files/en-us/web/css/syntax/index.md | 2 +- files/en-us/web/css/used_value/index.md | 2 +- .../web/css/value_definition_syntax/index.md | 2 +- .../web/css/visual_formatting_model/index.md | 2 +- files/en-us/web/html/element/style/index.md | 2 +- 49 files changed, 116 insertions(+), 115 deletions(-) rename files/en-us/web/css/{ => css_cascade}/specificity/index.md (99%) diff --git a/files/en-us/_redirects.txt b/files/en-us/_redirects.txt index 81f819342d4d1a1..9c7c1a3c1d1224a 100644 --- a/files/en-us/_redirects.txt +++ b/files/en-us/_redirects.txt @@ -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 @@ -11958,6 +11958,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 55b52e6fc682b53..ca2d0dd11028c95 100644 --- a/files/en-us/_wikihistory.json +++ b/files/en-us/_wikihistory.json @@ -76239,6 +76239,59 @@ "Fredchat" ] }, + "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"] @@ -78426,59 +78479,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/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..60d5edaff967ef4 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/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. @@ -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..33c836e86e622c8 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/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. @@ -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. 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..a6582a62a70b16b 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/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 73fe85cc44651c4..bca6810fc875e9a 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/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 747dc1ca984cf14..3829c17fdbfef47 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..0c844a3fe1377cc 100644 --- a/files/en-us/web/css/actual_value/index.md +++ b/files/en-us/web/css/actual_value/index.md @@ -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/at-rule/index.md b/files/en-us/web/css/at-rule/index.md index 45667a5ce8cb759..4d05202f8226b20 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/cascade/index.md b/files/en-us/web/css/cascade/index.md index eff21d3edbe617d..4a09f200735afde 100644 --- a/files/en-us/web/css/cascade/index.md +++ b/files/en-us/web/css/cascade/index.md @@ -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/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 da102006462da51..5e147a2a60e7e4c 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 @@ -47,7 +47,7 @@ Finally, note that for non-replaced inline elements, the amount of space taken u - [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/css_cascade/index.md b/files/en-us/web/css/css_cascade/index.md index 4123071e514048c..c60b3684ff27d94 100644 --- a/files/en-us/web/css/css_cascade/index.md +++ b/files/en-us/web/css/css_cascade/index.md @@ -48,7 +48,7 @@ The opposite also occurs. Sometimes there are no declarations defining the value ### Key concepts and definitions -- {{cssxref("Specificity")}} +- [specificity](/en-US/docs/Web/CSS/CSS_cascade/Specificity) - [Cascade origin and importance](/en-US/docs/Web/CSS/Cascade) - [Values](/en-US/docs/Web/CSS/Value_definition_syntax) - [actual value](/en-US/docs/Web/CSS/actual_value) @@ -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/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. diff --git a/files/en-us/web/css/specificity/index.md b/files/en-us/web/css/css_cascade/specificity/index.md similarity index 99% rename from files/en-us/web/css/specificity/index.md rename to files/en-us/web/css/css_cascade/specificity/index.md index 1be420956ea0b83..606d9363e528145 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 --- 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 d286fb1811e5a07..007e5989e3100ce 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..b96a396d10033a4 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,7 +181,7 @@ 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) +- [Specificity](/en-US/docs/Web/CSS/CSS_cascade/Specificity) - [Cascade](/en-US/docs/Web/CSS/Cascade) - {{domxref("Document.querySelector")}} 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/important/index.md b/files/en-us/web/css/important/index.md index 888d251b80b4198..4b9fd223e8ea301 100644 --- a/files/en-us/web/css/important/index.md +++ b/files/en-us/web/css/important/index.md @@ -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 Specificity](/en-US/docs/Web/CSS/CSS_cascade/Specificity) - [CSS Cascade](/en-US/docs/Web/CSS/Cascade) diff --git a/files/en-us/web/css/index.md b/files/en-us/web/css/index.md index 73fc067b8821452..d47f95ecb2dd246 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/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/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 fa233d384b18210..3db52af51366b01 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 610fe281bb148c4..edad1abf77a92c9 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 `