New Module: CSS Selectors

files/en-us/web/css/css_selectors/index.md

@@ -1,166 +1,204 @@
 ---
 title: CSS selectors
-slug: Web/CSS/CSS_Selectors
-page-type: landing-page
+slug: Web/CSS/CSS_selectors
+page-type: css-module
 spec-urls: https://drafts.csswg.org/selectors/
 ---
 
-{{CSSRef("Selectors")}}
-
-**CSS selectors** define the pattern to select elements to which a set of CSS rules are then applied.
-
-CSS selectors can be grouped into the following categories based on the type of elements they can select.
-
-## Basic selectors
-
-- [Universal selector](/en-US/docs/Web/CSS/Universal_selectors)
-
-  - : Selects all elements. Optionally, it may be restricted to a specific namespace or to all namespaces.
-
-    **Syntax:** `*` `ns|*` `*|*`
-
-    **Example:** `*` will match all the elements of the document.
-
-- [Type selector](/en-US/docs/Web/CSS/Type_selectors)
-
-  - : Selects all elements that have the given node name.
-
-    **Syntax:** `elementname`
-
-    **Example:** `input` will match any {{HTMLElement("input")}} element.
-
+{{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 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 which DOM nodes to return as a [`NodeList`](/en-US/docs/Web/API/NodeList).
+
+Selectors, whether used in CSS or JS, enable targeting HTML elements based on their type, attributes, current states, and even position in the DOM. Combinators enable being more precise in the elements you select by enabling specifying elements based on their relationship to other elements.
+
+## Reference
+
+### Combinators and seperators
+
+- `+` ([Adjacent or next sibling combinator](/en-US/docs/Web/CSS/Adjacent_sibling_combinator))
+- `>` ([Child combinator](/en-US/docs/Web/CSS/Child_combinator))
+- `||` ([Column combinator](/en-US/docs/Web/CSS/Column_combinator)) {{Experimental_Inline}}
+- `~` ([General or subsequent sibling combinator](/en-US/docs/Web/CSS/General_sibling_combinator))
+- " " ([Descendant combinator](/en-US/docs/Web/CSS/Descendant_combinator))
+- `|` ([Namespace separator](/en-US/docs/Web/CSS/Namespace_separator))
+
+### Selectors
+
+- {{CSSXref(":active")}}
+- {{CSSXref(":any-link")}}
+- {{CSSXref(":autofill")}}
+- {{CSSXref(":blank")}}
+- {{CSSXref(":buffering")}}
+- {{CSSXref(":checked")}}
+- {{CSSXref(":current")}}
+- {{CSSXref(":current", ":current()")}}
+- {{CSSXref(":default")}}
+- {{CSSXref(":defined")}}
+- {{CSSXref(":dir", ":dir()")}}
+- {{CSSXref(":disabled")}}
+- {{CSSXref(":empty")}}
+- {{CSSXref(":enabled")}}
+- {{CSSXref(":first-child")}}
+- {{CSSXref(":first-of-type")}}
+- {{CSSXref(":focus")}}
+- {{CSSXref(":focus-visible")}}
+- {{CSSXref(":focus-within")}}
+- {{CSSXref(":fullscreen")}}
+- {{CSSXref(":future")}}
+- {{CSSXref(":has", ":has()")}}
+- {{CSSXref(":hover")}}
+- {{CSSXref(":indeterminate")}}
+- {{CSSXref(":in-range")}}
+- {{CSSXref(":invalid")}}
+- {{CSSXref(":is", ":is()")}}
+- {{CSSXref(":lang", ":lang()")}}
+- {{CSSXref(":last-child")}}
+- {{CSSXref(":last-of-type")}}
+- {{CSSXref(":link")}}
+- {{CSSXref(":local-link")}}
+- `:matches()` (obsolete legacy selector alias for {{CSSXref( ":is", ":is()")}})
+- {{CSSXref(":modal")}}
+- {{CSSXref(":muted")}}
+- {{CSSXref(":not", ":not()")}}
+- {{CSSXref(":nth-child", ":nth-child()")}}
+- {{CSSXref(":nth-col", ":nth-col()")}}
+- {{CSSXref(":nth-last-child", ":nth-last-child()")}}
+- {{CSSXref(":nth-last-col", ":nth-last-col()")}}
+- {{CSSXref(":nth-last-of-type", ":nth-last-of-type()")}}
+- {{CSSXref(":nth-of-type", ":nth-of-type()")}}
+- {{CSSXref(":only-child")}}
+- {{CSSXref(":only-of-type")}}
+- {{CSSXref(":open")}}
+- {{CSSXref(":optional")}}
+- {{CSSXref(":out-of-range")}}
+- {{CSSXref(":past")}}
+- {{CSSXref(":paused")}}
+- {{CSSXref(":picture-in-picture")}}
+- {{CSSXref(":placeholder-shown")}}
+- {{CSSXref(":playing")}}
+- {{CSSXref(":read-only")}}
+- {{CSSXref(":read-write")}}
+- {{CSSXref(":required")}}
+- {{CSSXref(":root")}}
+- {{CSSXref(":scope")}}
+- {{CSSXref(":seeking")}}
+- {{CSSXref(":stalled")}}
+- {{CSSXref(":target")}}
+- {{CSSXref(":target-within")}}
+- {{CSSXref(":user-invalid")}}
+- {{CSSXref(":user-valid")}}
+- {{CSSXref(":valid")}}
+- {{CSSXref(":visited")}}
+- {{CSSXref(":volume-locked")}}
+- {{CSSXref(":where", ":where()")}}
+- [`:-webkit-` pseudo-classes](/en-US/docs/Web/CSS/WebKit_Extensions#pseudo-classes)
+- [Attribute selectors](/en-US/docs/Web/CSS/Attribute_selectors)
 - [Class selector](/en-US/docs/Web/CSS/Class_selectors)
-
-  - : Selects all elements that have the given `class` attribute.
-
-    **Syntax:** `.classname`
-
-    **Example:** `.index` will match any element that has `class="index"`.
-
-- [ID selector](/en-US/docs/Web/CSS/ID_selectors)
-
-  - : Selects an element based on the value of its `id` attribute. There should be only one element with a given ID in a document.
-
-    **Syntax:** `#idname`
-
-    **Example:** `#toc` will match the element that has `id="toc"`.
-
-- [Attribute selector](/en-US/docs/Web/CSS/Attribute_selectors)
-
-  - : Selects all elements that have the given attribute.
-
-    **Syntax:** `[attr]` `[attr=value]` `[attr~=value]` `[attr|=value]` `[attr^=value]` `[attr$=value]` `[attr*=value]`
-
-    **Example:** `[autoplay]` will match all elements that have the `autoplay` attribute set (to any value).
-
-## Grouping selectors
-
+- [ID selectors](/en-US/docs/Web/CSS/ID_selectors)
+- [Type selectors](/en-US/docs/Web/CSS/Type_selectors)
+- [Universal selectors](/en-US/docs/Web/CSS/Universal_selectors)
+
+## Terms
+
+- {{glossary("Pseudo-class")}} glossary term
+- [Functional pseudo class](/en-US/docs/Web/CSS/Pseudo-classes#functional_pseudo-classes)
+- [Combinator](/en-US/docs/Web/CSS/CSS_selectors/Selectors_and_combinators#combinators)
+- [Simple selector](/en-US/docs/Web/CSS/CSS_selectors/Selectors_and_combinators#simple-selector)
+- [Compound selector](/en-US/docs/Web/CSS/CSS_selectors/Selectors_and_combinators#compound-selector)
+- [Complex selector](/en-US/docs/Web/CSS/CSS_selectors/Selectors_and_combinators#complex-selector)
+- [Relative selector](/en-US/docs/Web/CSS/CSS_selectors/Selectors_and_combinators#relative-selector)
 - [Selector list](/en-US/docs/Web/CSS/Selector_list)
+- {{CSSXref("Specificity")}}
 
-  - : The `,` selector is a grouping method that selects all the matching nodes.
-
-    **Syntax:** `A, B`
-
-    **Example:** `div, span` will match both {{HTMLElement("span")}} and {{HTMLElement("div")}} elements.
-
-## Combinators
-
-- [Descendant combinator](/en-US/docs/Web/CSS/Descendant_combinator)
-
-  - : The " " (space) combinator selects nodes that are descendants of the first element.
-
-    **Syntax:** `A B`
-
-    **Example:** `div span` will match all {{HTMLElement("span")}} elements that are inside a {{HTMLElement("div")}} element.
-
-- [Child combinator](/en-US/docs/Web/CSS/Child_combinator)
-
-  - : The `>` combinator selects nodes that are direct children of the first element.
-
-    **Syntax:** `A > B`
-
-    **Example:** `ul > li` will match all {{HTMLElement("li")}} elements that are nested directly inside a {{HTMLElement("ul")}} element.
+## Guides
 
-- [General sibling combinator](/en-US/docs/Web/CSS/General_sibling_combinator)
+- [CSS selectors and combinators](/en-US/docs/Web/CSS/CSS_selectors/Selectors_and_combinators)
 
-  - : The `~` combinator selects siblings. This means that the second element follows the first (though not necessarily immediately), and both share the same parent.
+  - : Overview of the different types of simple selectors and the various combinators defined in the CSS selectors and pseudo modules.
 
-    **Syntax:** `A ~ B`
+- [CSS selector structure](/en-US/docs/Web/CSS/CSS_selectors/Selector_structure)
 
-    **Example:** `p ~ span` will match all {{HTMLElement("span")}} elements that follow a {{HTMLElement("p")}}, immediately or not.
+  - : The structure of CSS selectors and the terminology introduced in the selectors module, from "simple selector" to "forgiving relative selector list".
 
-- [Adjacent sibling combinator](/en-US/docs/Web/CSS/Adjacent_sibling_combinator)
+- [Attribute selectors](/en-US/docs/Web/CSS/Attribute_selectors)
 
-  - : The `+` combinator matches the second element only if it _immediately_ follows the first element.
-
-    **Syntax:** `A + B`
-
-    **Example:** `h2 + p` will match the first {{HTMLElement("p")}} element that _immediately_ follows an {{HTMLElement("Heading_Elements", "h2")}} element.
-
-- [Column combinator](/en-US/docs/Web/CSS/Column_combinator) {{Experimental_Inline}}
-
-  - : The `||` combinator selects nodes which belong to a column.
-
-    **Syntax:** `A || B`
-
-    **Example:** `col || td` will match all {{HTMLElement("td")}} elements that belong to the scope of the {{HTMLElement("col")}}.
-
-## Pseudo-classes and pseudo-elements
+  - : Selects elements that have the given attribute, with optional substring values.
 
 - [Pseudo classes](/en-US/docs/Web/CSS/Pseudo-classes)
 
-  - : The `:` pseudo allow the selection of elements based on state information that is not contained in the document tree.
+  - : Pseudo-classes allow the selection of elements based on state information that is not contained in the document tree.
 
-    **Example:** `a:visited` will match all {{HTMLElement("a")}} elements that have been visited by the user.
+- [Learn: CSS selectors](/en-US/docs/Learn/CSS/Building_blocks/Selectors)
 
-- [Pseudo elements](/en-US/docs/Web/CSS/Pseudo-elements)
+  - : Part of CSS building blocks, includes tutorials on [Type, class, and ID selectors](/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors), [Attribute selectors](/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors), [Pseudo-classes and pseudo-elements](/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements), [Combinators](/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators), [Cascade, specificity, and inheritance](/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance), and [Cascade layers](/en-US/docs/Learn/CSS/Building_blocks/Cascade_layers).
 
-  - : The `::` pseudo represent entities that are not included in HTML.
+- [Using the `:target` pseudo-class in selectors](/en-US/docs/Web/CSS/CSS_selectors/Using_the_:target_pseudo-class_in_selectors)
 
-    **Example:** `p::first-line` will match the first line of all {{HTMLElement("p")}} elements.
+  - : Learn how to use the {{CSSXref(":target")}} pseudo-class to style the target element a URL's fragment identifier.
 
-## Structure of a selector
+- [Learn: UI pseudo-classes](/en-US/docs/Learn/Forms/UI_pseudo-classes)
 
-The term 'selector' can refer to one of the following:
+  - : Learn the different UI pseudo-classes available for styling forms in different states.
 
-- Simple selector
+- [Locating DOM elements using selectors](/en-US/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors)
 
-  - : A selector with a single component, such as a single id selector or type selector, that's not used in combination with or contains any other selector component or combinator. A given element is said to match a simple selector when that simple selector accurately describes the element. All [basic selectors](#basic_selectors), attributes, and single [pseudo-classes and pseudo-elements](#pseudo-classes_and_pseudo-elements) are simple selectors.
+  - : The selectors API enables using selectors in JavaScript to retrieve element nodes from the DOM.
 
-- Compound selector
+## Related concepts
 
-  - : A sequence of [simple selectors](#simple_selector) that are not separated by a [combinator](#combinators). A compound selector represents a set of simultaneous conditions on a single element. A given element is said to match a compound selector when the element matches all the simple selectors in the compound selector.
+- CSS scoping module
 
-    In a compound selector, the [type selector](/en-US/docs/Web/CSS/Type_selectors) or a [universal selector](/en-US/docs/Web/CSS/Universal_selectors) in a compound selector must come first in the sequence of selectors. Only one type selector or universal selector is allowed in the sequence. Since whitespace represents the [descendant combinator](/en-US/docs/Web/CSS/Descendant_combinator), no whitespace is allowed between the simple selectors in a compound selector.
+  - {{CSSXref(":host")}} pseudo-class
+  - {{CSSXref(":host_function", ":host()")}} pseudo-class
+  - {{cssxref(":host-context", ":host-context()")}} pseudo-class
+  - {{CSSXref("::slotted")}} pseudo-element
 
-    **Example:** `a#selected {...}`
+- [CSS pseudo-element module](/en-US/docs/Web/CSS/CSS_pseudo) (representing entities not included in HTML)
 
-- Complex selector
+  - {{CSSXref("::after")}}
+  - {{CSSXref("::before")}}
+  - {{CSSXref("::file-selector-button")}}
+  - {{CSSXref("::first-letter")}}
+  - {{CSSXref("::first-line")}}
+  - {{CSSXref("::grammar-error")}}
+  - {{CSSXref("::marker")}}
+  - {{CSSXref("::placeholder")}}
+  - {{CSSXref("::selection")}}
+  - {{CSSXref("::spelling-error")}}
+  - {{CSSXref("::target-text")}}
 
-  - : A sequence of one or more simple and/or [compound selectors](#compound_selector) that are separated by [combinators](#combinators). A complex selector represents a set of simultaneous conditions on a set of elements. These conditions apply in the context of relationships described by the combinators. A given element is said to match a complex selector when the element matches compound selectors and the combinators between the compound selectors.
+- [CSS shadow parts module](/en-US/docs/Web/CSS/CSS_shadow_parts)
 
-    **Examples:** `a#selected > .icon {...}`, `.box h2 + p {...}`, `a .icon {...}`
+  - {{CSSXref("::part")}} pseudo-element
 
-- Relative selector
+- [CSS positioned layout module](/en-US/docs/Web/CSS/CSS_positioned_layout)
 
-  - : A selector representing an element relative to one or more anchor elements preceded by a combinator. Relative selectors that don't begin with an explicit [combinator](#combinators) have an implied [descendant combinator](/en-US/docs/Web/CSS/Descendant_combinator).
+  - {{CSSxRef("::backdrop")}}
 
-    **Examples:** `+ div#topic > #reference {...}`, `> .icon {...}`, `dt:has(+ img) ~ dd {...}`
+- Other [pseudo-elements](/en-US/docs/Web/CSS/Pseudo-elements)
 
-- [Selector list](/en-US/docs/Web/CSS/Selector_list)
+  - {{CSSxRef("::cue")}}
+  - {{CSSxRef("::cue-region")}}
+
+- {{CSSXref("@namespace")}} at-rule
 
-  - : A comma-separated list of [simple](#simple_selector), [compound](#compound_selector), or [complex](#complex_selector) selectors. If the constituent selector type of a selector list is important but unspecified, it is called a _complex selector list_. A given element is said to match a selector list when the element matches any (at least one) of the selectors in that selector list. Read more about when a selector list is deemed [invalid](/en-US/docs/Web/CSS/Selector_list#invalid_selector_list) and how to construct a [forgiving selector list](/en-US/docs/Web/CSS/Selector_list#forgiving_selector_list).
+- {{cssxref("important", "!important")}}
+- [Specificity](/en-US/docs/Web/CSS/Specificity)
+- [Cascade](/en-US/docs/Web/CSS/Cascade)
 
-    **Example:** `#main, article.heading {...}`
+- {{domxref("Document.querySelector")}} method
+- {{domxref("Document.querySelectorAll")}} method
+- {{domxref("NodeList.forEach()")}} method
 
 ## Specifications
 
 {{Specifications}}
 
-See the [pseudo-class](/en-US/docs/Web/CSS/Pseudo-classes#specifications) and [pseudo-element](/en-US/docs/Web/CSS/Pseudo-elements#specifications) specification tables for details on those.
-
 ## See also
 
-- [`:has()` pseudo class](/en-US/docs/Web/CSS/:has)
-- [CSS Specificity](/en-US/docs/Web/CSS/Specificity)
-- [Selector list](/en-US/docs/Web/CSS/Selector_list)
+- [CSS pseudo-element module](/en-US/docs/Web/CSS/CSS_pseudo)
+- [CSS cascade and inheritance module](/en-US/docs/Web/CSS/CSS_cascade)
+- [Cascade origin and importance](/en-US/docs/Web/CSS/Cascade)
+- [Using shadow DOM](/en-US/docs/Web/API/Web_components/Using_shadow_DOM)

files/en-us/web/css/css_selectors/using_the__colon_target_pseudo-class_in_selectors/index.md

@@ -1,6 +1,6 @@
 ---
 title: Using the :target pseudo-class in selectors
-slug: Web/CSS/CSS_Selectors/Using_the_:target_pseudo-class_in_selectors
+slug: Web/CSS/CSS_selectors/Using_the_:target_pseudo-class_in_selectors
 page-type: guide
 ---