chore(ia): Reorganize CSS pages - part 4 (moving selector files under reference/selectors)

files/en-us/glossary/css_selector/index.md

@@ -61,22 +61,22 @@ The resulting page content is styled like this:
 
 - [Learn more about CSS selectors](/en-US/docs/Learn_web_development/Core/Styling_basics/Basic_selectors) in our introduction to CSS.
 - Basic selectors
-  - [Type selectors](/en-US/docs/Web/CSS/Type_selectors) `elementname`
-  - [Class selectors](/en-US/docs/Web/CSS/Class_selectors) `.classname`
-  - [ID selectors](/en-US/docs/Web/CSS/ID_selectors) `#idname`
-  - [Universal selectors](/en-US/docs/Web/CSS/Universal_selectors) `* ns|* *|*`
-  - [Attribute selectors](/en-US/docs/Web/CSS/Attribute_selectors) `[attr=value]`
-  - [State selectors](/en-US/docs/Web/CSS/Pseudo-classes) `a:active, a:visited`
+  - [Type selectors](/en-US/docs/Web/CSS/Reference/Selectors/Type_selectors) `elementname`
+  - [Class selectors](/en-US/docs/Web/CSS/Reference/Selectors/Class_selectors) `.classname`
+  - [ID selectors](/en-US/docs/Web/CSS/Reference/Selectors/ID_selectors) `#idname`
+  - [Universal selectors](/en-US/docs/Web/CSS/Reference/Selectors/Universal_selectors) `* ns|* *|*`
+  - [Attribute selectors](/en-US/docs/Web/CSS/Reference/Selectors/Attribute_selectors) `[attr=value]`
+  - [State selectors](/en-US/docs/Web/CSS/Reference/Selectors/Pseudo-classes) `a:active, a:visited`
 
 - Grouping selectors
-  - [Selector list](/en-US/docs/Web/CSS/Selector_list) `A, B`
+  - [Selector list](/en-US/docs/Web/CSS/Reference/Selectors/Selector_list) `A, B`
 
 - Combinators
-  - [Next-sibling selectors](/en-US/docs/Web/CSS/Next-sibling_combinator) `A + B`
-  - [Subsequent-sibling selectors](/en-US/docs/Web/CSS/Subsequent-sibling_combinator) `A ~ B`
-  - [Child selectors](/en-US/docs/Web/CSS/Child_combinator) `A > B`
-  - [Descendant selectors](/en-US/docs/Web/CSS/Descendant_combinator) `A B`
+  - [Next-sibling selectors](/en-US/docs/Web/CSS/Reference/Selectors/Next-sibling_combinator) `A + B`
+  - [Subsequent-sibling selectors](/en-US/docs/Web/CSS/Reference/Selectors/Subsequent-sibling_combinator) `A ~ B`
+  - [Child selectors](/en-US/docs/Web/CSS/Reference/Selectors/Child_combinator) `A > B`
+  - [Descendant selectors](/en-US/docs/Web/CSS/Reference/Selectors/Descendant_combinator) `A B`
 
 - Pseudo
-  - [Pseudo classes](/en-US/docs/Web/CSS/Pseudo-classes) `:`
-  - [Pseudo elements](/en-US/docs/Web/CSS/Pseudo-elements) `::`
+  - [Pseudo classes](/en-US/docs/Web/CSS/Reference/Selectors/Pseudo-classes) `:`
+  - [Pseudo elements](/en-US/docs/Web/CSS/Reference/Selectors/Pseudo-elements) `::`

files/en-us/glossary/pseudo-class/index.md

@@ -9,4 +9,4 @@ In CSS, a **pseudo-class** selector targets elements depending on their state ra
 
 ## See also
 
-- [Pseudo-class documentation](/en-US/docs/Web/CSS/Pseudo-classes)
+- [Pseudo-class documentation](/en-US/docs/Web/CSS/Reference/Selectors/Pseudo-classes)

files/en-us/glossary/pseudo-element/index.md

@@ -9,4 +9,4 @@ In CSS, a **pseudo-element** selector applies styles to parts of your document c
 
 ## See also
 
-- [Pseudo-elements](/en-US/docs/Web/CSS/Pseudo-elements)
+- [Pseudo-elements](/en-US/docs/Web/CSS/Reference/Selectors/Pseudo-elements)

files/en-us/learn_web_development/core/css_layout/supporting_older_browsers/index.md

@@ -79,7 +79,7 @@ Similarly, this [error-handling](/en-US/docs/Web/CSS/CSS_syntax/Error_handling#v
 
 Including new selectors that aren't supported in all browsers needs to be handled more carefully. If a selector in a comma-separated list of [selectors is invalid](/en-US/docs/Learn_web_development/Extensions/Testing/HTML_and_CSS#selector_support), the entire style block is ignored.
 
-If using vendor-prefixed [pseudo-elements](/en-US/docs/Web/CSS/Pseudo-elements) or new [pseudo-classes](/en-US/docs/Web/CSS/Pseudo-classes) a browser may not yet support, include the prefixed values within a [forgiving selector list](/en-US/docs/Web/CSS/Selector_list#forgiving_selector_list) by using {{cssxref(":is", ":is()")}} or {{cssxref(":where", ":where()")}} so the entire selector block doesn't get [invalidated and ignored](/en-US/docs/Web/CSS/Selector_list#invalid_selector_list).
+If using vendor-prefixed [pseudo-elements](/en-US/docs/Web/CSS/Reference/Selectors/Pseudo-elements) or new [pseudo-classes](/en-US/docs/Web/CSS/Reference/Selectors/Pseudo-classes) a browser may not yet support, include the prefixed values within a [forgiving selector list](/en-US/docs/Web/CSS/Reference/Selectors/Selector_list#forgiving_selector_list) by using {{cssxref(":is", ":is()")}} or {{cssxref(":where", ":where()")}} so the entire selector block doesn't get [invalidated and ignored](/en-US/docs/Web/CSS/Reference/Selectors/Selector_list#invalid_selector_list).
 
 ```css
 :is(:-prefix-mistake, :unsupported-pseudo),

files/en-us/learn_web_development/core/styling_basics/basic_selectors/index.md

@@ -356,7 +356,7 @@ h1, ..special {
 
 ## The universal selector
 
-The universal selector is indicated by an asterisk (`*`). It selects everything in the document. If `*` is chained using a [descendant combinator](/en-US/docs/Web/CSS/Descendant_combinator), it selects everything inside that ancestor element. For example, `p *` selects all the nested elements inside the `<p>` element.
+The universal selector is indicated by an asterisk (`*`). It selects everything in the document. If `*` is chained using a [descendant combinator](/en-US/docs/Web/CSS/Reference/Selectors/Descendant_combinator), it selects everything inside that ancestor element. For example, `p *` selects all the nested elements inside the `<p>` element.
 
 In the following example, we use the universal selector to remove the margins on all elements. Instead of the browser's default styling, which spaces out headings and paragraphs with margins, everything is close together.
 

files/en-us/learn_web_development/core/styling_basics/handling_conflicts/index.md

@@ -337,7 +337,7 @@ The amount of specificity a selector has is measured using three different value
 - **Elements**: Score one in this column (1 point) for each element selector or pseudo-element contained inside the overall selector.
 
 > [!NOTE]
-> The universal selector ([`*`](/en-US/docs/Web/CSS/Universal_selectors)), [combinators](/en-US/docs/Learn_web_development/Core/Styling_basics/Combinators) (`+`, `>`, `~`, ' '), and specificity adjustment selector ([`:where()`](/en-US/docs/Web/CSS/:where)) along with its parameters, have no effect on specificity.
+> The universal selector ([`*`](/en-US/docs/Web/CSS/Reference/Selectors/Universal_selectors)), [combinators](/en-US/docs/Learn_web_development/Core/Styling_basics/Combinators) (`+`, `>`, `~`, ' '), and specificity adjustment selector ([`:where()`](/en-US/docs/Web/CSS/:where)) along with its parameters, have no effect on specificity.
 
 The following table shows a few isolated examples to get you in the mood. Try going through these, and make sure you understand why they have the specificity that we have given them. We've not covered selectors in detail yet, but you can find details of each selector on the MDN [selectors reference](/en-US/docs/Web/CSS/CSS_selectors/Selectors_and_combinators).
 
@@ -435,7 +435,7 @@ So what's going on here? First of all, we are only interested in the first seven
 
 ID selectors have high specificity. This means styles applied based on matching an ID selector will overrule styles applied based on other selectors, including class and type selectors. Because an ID can only occur once on a page and because of the high specificity of ID selectors, it is preferable to add a class to an element instead of an ID.
 
-If using the ID is the only way to target the element — perhaps because you do not have access to the markup and cannot edit it — consider using the ID within an [attribute selector](/en-US/docs/Web/CSS/Attribute_selectors), such as `p[id="header"]`.
+If using the ID is the only way to target the element — perhaps because you do not have access to the markup and cannot edit it — consider using the ID within an [attribute selector](/en-US/docs/Web/CSS/Reference/Selectors/Attribute_selectors), such as `p[id="header"]`.
 
 ### Inline styles
 

files/en-us/learn_web_development/core/styling_basics/pseudo_classes_and_elements/index.md

@@ -132,7 +132,7 @@ Go back to our [first pseudo-class example](#basic_pseudo-class_example) and edi
 1. Add a rule that colors the paragraph text `blue` when they are hovered over.
 2. Add a rule that selects only the last paragraph inside the article, and gives it an `orange` `background-color`.
 
-You can find information on all the other available pseudo-classes on the MDN [Pseudo-classes](/en-US/docs/Web/CSS/Pseudo-classes) reference page.
+You can find information on all the other available pseudo-classes on the MDN [Pseudo-classes](/en-US/docs/Web/CSS/Reference/Selectors/Pseudo-classes) reference page.
 
 ## What is a pseudo-element?
 
@@ -186,7 +186,7 @@ Edit the CSS of the previous example using the MDN playground:
 - A `1px solid black` `border`.
 - A `font-size` of `2rem`.
 
-You can find information on all the other available pseudo-elements on the MDN [Pseudo-elements](/en-US/docs/Web/CSS/Pseudo-elements) reference page.
+You can find information on all the other available pseudo-elements on the MDN [Pseudo-elements](/en-US/docs/Web/CSS/Reference/Selectors/Pseudo-elements) reference page.
 
 ## Combining pseudo-classes and pseudo-elements
 
@@ -280,7 +280,7 @@ In the next article, we'll learn about combinators.
 
 ## See also
 
-- [Pseudo-classes reference](/en-US/docs/Web/CSS/Pseudo-classes)
-- [Pseudo-elements reference](/en-US/docs/Web/CSS/Pseudo-elements)
+- [Pseudo-classes reference](/en-US/docs/Web/CSS/Reference/Selectors/Pseudo-classes)
+- [Pseudo-elements reference](/en-US/docs/Web/CSS/Reference/Selectors/Pseudo-elements)
 
 {{PreviousMenuNext("Learn_web_development/Core/Styling_basics/Attribute_selectors", "Learn_web_development/Core/Styling_basics/Combinators", "Learn_web_development/Core/Styling_basics")}}

files/en-us/learn_web_development/extensions/forms/how_to_build_custom_form_controls/index.md

@@ -1654,7 +1654,7 @@ To support the [`listbox`](/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/li
 ```
 
 > [!NOTE]
-> Including both the `role` attribute and a `class` attribute is not necessary. Instead of using `.option` use the `[role="option"]` [attribute selectors](/en-US/docs/Web/CSS/Attribute_selectors) in your CSS.
+> Including both the `role` attribute and a `class` attribute is not necessary. Instead of using `.option` use the `[role="option"]` [attribute selectors](/en-US/docs/Web/CSS/Reference/Selectors/Attribute_selectors) in your CSS.
 
 ### The `aria-selected` attribute
 

files/en-us/learn_web_development/extensions/forms/styling_web_forms/index.md

@@ -428,7 +428,7 @@ textarea {
 
 #### Styling the submit button
 
-The {{HTMLElement("button")}} element is really convenient to style with CSS; you can do whatever you want, even using [pseudo-elements](/en-US/docs/Web/CSS/Pseudo-elements):
+The {{HTMLElement("button")}} element is really convenient to style with CSS; you can do whatever you want, even using [pseudo-elements](/en-US/docs/Web/CSS/Reference/Selectors/Pseudo-elements):
 
 ```css
 button {

files/en-us/learn_web_development/extensions/performance/css/index.md

@@ -86,7 +86,7 @@ To optimize the CSSOM construction and improve page performance, you can do one
 
   Making your selectors less complex and specific is also good for maintenance. It is easy to understand what simple selectors are doing, and it is easy to override styles when needed later on if the selectors are less [specific](/en-US/docs/Learn_web_development/Core/Styling_basics/Handling_conflicts#specificity_2).
 
-- **Don't apply styles to more elements than needed**: A common mistake is to apply styles to all elements using the [universal selector](/en-US/docs/Web/CSS/Universal_selectors), or at least, to more elements than needed. This kind of styling can impact performance negatively, especially on larger sites.
+- **Don't apply styles to more elements than needed**: A common mistake is to apply styles to all elements using the [universal selector](/en-US/docs/Web/CSS/Reference/Selectors/Universal_selectors), or at least, to more elements than needed. This kind of styling can impact performance negatively, especially on larger sites.
 
   ```css
   /* Selects every element inside the <body> */

files/en-us/learn_web_development/extensions/testing/html_and_css/index.md

@@ -270,7 +270,7 @@ To sort this out, we have added a second `background-color` declaration, which j
 
 Of course, no CSS features will apply at all if you don't use the right [selectors](/en-US/docs/Learn_web_development/Core/Styling_basics/Basic_selectors) to select the element you want to style!
 
-In a comma-separated list of selectors, if you just write a selector incorrectly, it may not match any element. If, however, a selector is invalid, the **entire** list of selectors is ignored, along with the entire style block. For this reason, only include a `:-moz-` prefixed pseudo class or pseudo-element in a [forgiving selector list](/en-US/docs/Web/CSS/Selector_list#forgiving_selector_list), such as `:where(::-moz-thumb)`. Don't include a `:-moz-` prefixed pseudo class or pseudo-element within a comma-separated group of selectors outside of a [`:is()`](/en-US/docs/Web/CSS/:is) or [`:where()`](/en-US/docs/Web/CSS/:where) forgiving selector list as all browsers other than Firefox will ignore the entire block. Note that both `:is()` and `:where()` can be passed as parameters in other selector lists, including [`:has()`](/en-US/docs/Web/CSS/:has) and [`:not()`](/en-US/docs/Web/CSS/:not).
+In a comma-separated list of selectors, if you just write a selector incorrectly, it may not match any element. If, however, a selector is invalid, the **entire** list of selectors is ignored, along with the entire style block. For this reason, only include a `:-moz-` prefixed pseudo class or pseudo-element in a [forgiving selector list](/en-US/docs/Web/CSS/Reference/Selectors/Selector_list#forgiving_selector_list), such as `:where(::-moz-thumb)`. Don't include a `:-moz-` prefixed pseudo class or pseudo-element within a comma-separated group of selectors outside of a [`:is()`](/en-US/docs/Web/CSS/:is) or [`:where()`](/en-US/docs/Web/CSS/:where) forgiving selector list as all browsers other than Firefox will ignore the entire block. Note that both `:is()` and `:where()` can be passed as parameters in other selector lists, including [`:has()`](/en-US/docs/Web/CSS/:has) and [`:not()`](/en-US/docs/Web/CSS/:not).
 
 We find that it is helpful to inspect the element you are trying to style using your browser's dev tools, then look at the DOM tree breadcrumb trail that DOM inspectors tend to provide to see if your selector makes sense compared to it.
 

files/en-us/learn_web_development/howto/solve_css_problems/create_fancy_boxes/index.md

@@ -123,7 +123,7 @@ Okay, let's have fun with backgrounds:
 
 ## Pseudo-elements
 
-When styling a single box, you could find yourself limited and could wish to have more boxes to create even more amazing styles. Most of the time, that leads to polluting the DOM by adding extra HTML element for the unique purpose of style. Even if it is necessary, it's somewhat considered bad practice. One solution to avoid such pitfalls is to use [CSS pseudo-elements](/en-US/docs/Web/CSS/Pseudo-elements).
+When styling a single box, you could find yourself limited and could wish to have more boxes to create even more amazing styles. Most of the time, that leads to polluting the DOM by adding extra HTML element for the unique purpose of style. Even if it is necessary, it's somewhat considered bad practice. One solution to avoid such pitfalls is to use [CSS pseudo-elements](/en-US/docs/Web/CSS/Reference/Selectors/Pseudo-elements).
 
 ### A cloud
 

files/en-us/learn_web_development/howto/solve_css_problems/highlight_para_after_h1/index.md

@@ -14,7 +14,7 @@ A common pattern is to style the first paragraph in an article differently to th
 
 ## The next-sibling combinator
 
-CSS has a group of [CSS Selectors](/en-US/docs/Web/CSS/CSS_selectors) which are referred to as **combinators**, because they select things based on a combination of selectors. In our case, we will use the [next-sibling combinator](/en-US/docs/Web/CSS/Next-sibling_combinator). This combinator selects an element based on it being next to another element. In our HTML we have a {{htmlelement("Heading_Elements", "h1")}} followed by a {{htmlelement("p")}}. The `<p>` is the next sibling of the `<h1>` so we can select it with `h1 + p`.
+CSS has a group of [CSS Selectors](/en-US/docs/Web/CSS/CSS_selectors) which are referred to as **combinators**, because they select things based on a combination of selectors. In our case, we will use the [next-sibling combinator](/en-US/docs/Web/CSS/Reference/Selectors/Next-sibling_combinator). This combinator selects an element based on it being next to another element. In our HTML we have a {{htmlelement("Heading_Elements", "h1")}} followed by a {{htmlelement("p")}}. The `<p>` is the next sibling of the `<h1>` so we can select it with `h1 + p`.
 
 ```html live-sample___highlight_h1_plus_para
 <div class="wrapper">

files/en-us/mdn/writing_guidelines/code_style_guide/css/index.md

@@ -254,7 +254,7 @@ Empty lines between properties should be used sparingly. Add them only when each
 
 ### Use class selectors
 
-Generally, prefer [class selectors](/en-US/docs/Web/CSS/Class_selectors) (and use `class` instead of `id` in your HTML). They can be composed: multiple elements can use the same class, and the same class can be used for multiple elements.
+Generally, prefer [class selectors](/en-US/docs/Web/CSS/Reference/Selectors/Class_selectors) (and use `class` instead of `id` in your HTML). They can be composed: multiple elements can use the same class, and the same class can be used for multiple elements.
 
 ```css example-good
 .footnote {
@@ -272,7 +272,7 @@ Use classes for styling, and reserve IDs for non-CSS purposes, such as for use i
 
 ### Old pseudo-element selectors
 
-The `::before`, `::after`, `::first-letter`, and `::first-line` [pseudo-elements](/en-US/docs/Web/CSS/Pseudo-elements) can also be written with single colons (like `:before`). Avoid the single-colon syntax because it is discouraged and could be misidentified as a [pseudo-class](/en-US/docs/Web/CSS/Pseudo-classes) (`:hover`) by readers.
+The `::before`, `::after`, `::first-letter`, and `::first-line` [pseudo-elements](/en-US/docs/Web/CSS/Reference/Selectors/Pseudo-elements) can also be written with single colons (like `:before`). Avoid the single-colon syntax because it is discouraged and could be misidentified as a [pseudo-class](/en-US/docs/Web/CSS/Reference/Selectors/Pseudo-classes) (`:hover`) by readers.
 
 ### Complex selector lists
 

files/en-us/mdn/writing_guidelines/page_structures/page_types/css_selector_page_template/index.md

@@ -36,7 +36,7 @@ sidebar: mdnsidebar
 >   - : The end of the URL path after `https://developer.mozilla.org/en-US/docs/`). This will be formatted like `Web/CSS/:NameOfTheSelector`.
 >     For example, the [`:hover`](/en-US/docs/Web/CSS/:hover) selector slug is `Web/CSS/:hover`.
 > - **page-type**
->   - : The `page-type` key for CSS properties is one of `css-selector`, `css-pseudo-class`, or `css-pseudo-element`, depending on whether the selector is a [pseudo-class](/en-US/docs/Web/CSS/Pseudo-classes), a [pseudo-element](/en-US/docs/Web/CSS/Pseudo-elements), a [combinator](/en-US/docs/Web/CSS/CSS_selectors/Selectors_and_combinators#combinators), or a [simple selector](/en-US/docs/Web/CSS/CSS_selectors/Selector_structure#simple_selector).
+>   - : The `page-type` key for CSS properties is one of `css-selector`, `css-pseudo-class`, or `css-pseudo-element`, depending on whether the selector is a [pseudo-class](/en-US/docs/Web/CSS/Reference/Selectors/Pseudo-classes), a [pseudo-element](/en-US/docs/Web/CSS/Reference/Selectors/Pseudo-elements), a [combinator](/en-US/docs/Web/CSS/CSS_selectors/Selectors_and_combinators#combinators), or a [simple selector](/en-US/docs/Web/CSS/CSS_selectors/Selector_structure#simple_selector).
 > - **status**
 >   - : Flags describing the status of this feature. An array which may contain one or more of the following: `experimental`, `deprecated`, `non-standard`. This key should not be set manually: it is set automatically based on values in the browser compatibility data for the feature. See ["How feature statuses are added or updated"](/en-US/docs/MDN/Writing_guidelines/Page_structures/Feature_status#how_feature_statuses_are_added_or_updated).
 > - **browser-compat**