Replace CSS selector links with cssxref in /web/api

Search:
  for pseudo-class: \[`(:[a-z-]+(?:\(\))?)`\]\(/en-US/docs/Web/CSS/Reference/Selectors/[^)]+\)
  for pseudo-element: \[`(::[a-z-]+(?:\(\))?)`\]\(/en-US/docs/Web/CSS/Reference/Selectors/[^)]+\)
Replace: {{cssxref("$1")}}

files/en-us/web/api/customstateset/add/index.md

@@ -10,7 +10,7 @@ browser-compat: api.CustomStateSet.add
 
 The **`add`** method of the {{domxref("CustomStateSet")}} interface adds value representing a custom state to the `CustomStateSet`.
 
-Custom elements with a specific state can be selected using the [`:state()`](/en-US/docs/Web/CSS/Reference/Selectors/:state) pseudo-class, specifying the desired state as an argument.
+Custom elements with a specific state can be selected using the {{cssxref(":state()")}} pseudo-class, specifying the desired state as an argument.
 
 ## Syntax
 

files/en-us/web/api/customstateset/index.md

@@ -61,7 +61,7 @@ The states can be used within the custom element but are not directly accessible
 
 ### Interaction with CSS
 
-You can select a custom element that is in a specific state using the [`:state()`](/en-US/docs/Web/CSS/Reference/Selectors/:state) _custom state pseudo-class_.
+You can select a custom element that is in a specific state using the {{cssxref(":state()")}} _custom state pseudo-class_.
 The format of this pseudo-class is `:state(my-state-name)`, where `my-state-name` is the state as defined in the element.
 The custom state pseudo-class matches the custom element only if the state is `true` (i.e., if `my-state-name` is present in the `CustomStateSet`).
 
@@ -73,12 +73,12 @@ labeled-checkbox:state(checked) {
 }
 ```
 
-CSS can also be used to match a custom state [within a custom element's shadow DOM](/en-US/docs/Web/CSS/Reference/Selectors/:state#matching_a_custom_state_in_a_custom_elements_shadow_dom) by specifying `:state()` within the [`:host()`](/en-US/docs/Web/CSS/Reference/Selectors/:host_function) pseudo-class function.
+CSS can also be used to match a custom state [within a custom element's shadow DOM](/en-US/docs/Web/CSS/Reference/Selectors/:state#matching_a_custom_state_in_a_custom_elements_shadow_dom) by specifying `:state()` within the {{cssxref(":host()")}} pseudo-class function.
 
-Additionally, the `:state()` pseudo-class can be used after the [`::part()`](/en-US/docs/Web/CSS/Reference/Selectors/::part) pseudo-element to match the [shadow parts](/en-US/docs/Web/CSS/Guides/Shadow_parts) of a custom element that are in a particular state.
+Additionally, the `:state()` pseudo-class can be used after the {{cssxref("::part()")}} pseudo-element to match the [shadow parts](/en-US/docs/Web/CSS/Guides/Shadow_parts) of a custom element that are in a particular state.
 
 > [!WARNING]
-> Browsers that do not yet support [`:state()`](/en-US/docs/Web/CSS/Reference/Selectors/:state) will use a CSS `<dashed-ident>` for selecting custom states, which is now deprecated.
+> Browsers that do not yet support {{cssxref(":state()")}} will use a CSS `<dashed-ident>` for selecting custom states, which is now deprecated.
 > For information about how to support both approaches see the [Compatibility with `<dashed-ident>` syntax](#compatibility_with_dashed-ident_syntax) section below.
 
 ## Examples
@@ -322,7 +322,7 @@ After registering the custom element, we can use the element in HTML as shown be
 
 #### CSS
 
-The first block of CSS matches the exposed shadow part named `checkbox` using the [`::part()`](/en-US/docs/Web/CSS/Reference/Selectors/::part) selector, styling it to be `red` by default.
+The first block of CSS matches the exposed shadow part named `checkbox` using the {{cssxref("::part()")}} selector, styling it to be `red` by default.
 
 ```css
 question-box::part(checkbox) {
@@ -482,7 +482,7 @@ Click the element to see a different border being applied as the state changes.
 
 ## Compatibility with `<dashed-ident>` syntax
 
-Previously custom elements with custom states were selected using a `<dashed-ident>` instead of the [`:state()`](/en-US/docs/Web/CSS/Reference/Selectors/:state) function.
+Previously custom elements with custom states were selected using a `<dashed-ident>` instead of the {{cssxref(":state()")}} function.
 Browser versions that don't support `:state()` will throw an error when supplied with an ident that is not prefixed with the double dash.
 If support for these browsers is required, either use a [try...catch](/en-US/docs/Web/JavaScript/Reference/Statements/try...catch) block to support both syntaxes, or use a `<dashed-ident>` as the state's value and select it with both the `:--my-state` and `:state(--my-state)` CSS selector.
 

files/en-us/web/api/web_components/using_custom_elements/index.md

@@ -218,7 +218,7 @@ Built in HTML elements can have different _states_, such as "hover", "disabled",
 Some of these states can be set as attributes using HTML or JavaScript, while others are internal, and cannot.
 Whether external or internal, commonly these states have corresponding CSS [pseudo-classes](/en-US/docs/Web/CSS/Reference/Selectors/Pseudo-classes) that can be used to select and style the element when it is in a particular state.
 
-Autonomous custom elements (but not elements based on built-in elements) also allow you to define states and select against them using the [`:state()`](/en-US/docs/Web/CSS/Reference/Selectors/:state) pseudo-class function.
+Autonomous custom elements (but not elements based on built-in elements) also allow you to define states and select against them using the {{cssxref(":state()")}} pseudo-class function.
 The code below shows how this works using the example of an autonomous custom element that has an internal state `"collapsed"`.
 
 The `collapsed` state is represented as a boolean property (with setter and getter methods) that is not visible outside of the element.
@@ -253,7 +253,7 @@ customElements.define("my-custom-element", MyCustomElement);
 ```
 
 We can use the identifier added to the custom element's `CustomStateSet` (`this._internals.states`) for matching the element's custom state.
-This is matched by passing the identifier to the [`:state()`](/en-US/docs/Web/CSS/Reference/Selectors/:state) pseudo-class.
+This is matched by passing the identifier to the {{cssxref(":state()")}} pseudo-class.
 For example, below we select on the `hidden` state being true (and hence the element's `collapsed` state) using the `:hidden` selector, and remove the border.
 
 ```css
@@ -265,7 +265,7 @@ my-custom-element:state(hidden) {
 }
 ```
 
-The `:state()` pseudo-class can also be used within the [`:host()`](/en-US/docs/Web/CSS/Reference/Selectors/:host_function) pseudo-class function to match a custom state [within a custom element's shadow DOM](/en-US/docs/Web/CSS/Reference/Selectors/:state#matching_a_custom_state_in_a_custom_elements_shadow_dom). Additionally, the `:state()` pseudo-class can be used after the [`::part()`](/en-US/docs/Web/CSS/Reference/Selectors/::part) pseudo-element to match the [shadow parts](/en-US/docs/Web/CSS/Guides/Shadow_parts) of a custom element that is in a particular state.
+The `:state()` pseudo-class can also be used within the {{cssxref(":host()")}} pseudo-class function to match a custom state [within a custom element's shadow DOM](/en-US/docs/Web/CSS/Reference/Selectors/:state#matching_a_custom_state_in_a_custom_elements_shadow_dom). Additionally, the `:state()` pseudo-class can be used after the {{cssxref("::part()")}} pseudo-element to match the [shadow parts](/en-US/docs/Web/CSS/Guides/Shadow_parts) of a custom element that is in a particular state.
 
 There are several live examples in {{domxref("CustomStateSet")}} showing how this works.