40483 heading selectors

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

@@ -0,0 +1,50 @@
+---
+title: :heading
+slug: Web/CSS/:heading
+page-type: css-pseudo-class
+browser-compat: css.selectors.heading
+sidebar: cssref
+---
+
+The **`:heading`** [CSS](/en-US/docs/Web/CSS) [pseudo-class](/en-US/docs/Web/CSS/Pseudo-classes) matches [heading elements](/en-US/docs/Web/HTML/Reference/Elements/Heading_Elements) (`<h1>`-`<h6>`). In other words, the `:heading` pseudo-class allows you to style all headings at once, rather than individually.
+
+> [!NOTE]
+> The `:heading` pseudo-class has the specificity of that of a class. So `:heading {…}` would have a specificity of [0,1,0], whereas `section:heading {…}` would have a specificity of [0,1,1].
+
+## Syntax
+
+```css
+:heading {
+  /* ... */
+}
+```
+
+## Examples
+
+### Basic example
+
+```html
+<h1>Heading 1</h1>
+<h2>Heading 2</h2>
+<h3>Heading 3</h3>
+```
+
+```css
+:heading {
+  color: tomato;
+}
+```
+
+{{EmbedLiveSample("Basic_example")}}
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{CSSXRef(":heading_function", ":heading()")}}

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

@@ -0,0 +1,129 @@
+---
+title: :heading()
+slug: Web/CSS/:heading_function
+page-type: css-pseudo-class
+browser-compat: css.selectors.headingfunction
+sidebar: cssref
+---
+
+The **`:heading()`** [CSS](/en-US/docs/Web/CSS) [pseudo-class](/en-US/docs/Web/CSS/Pseudo-classes) function matches [heading elements](/en-US/docs/Web/HTML/Reference/Elements/Heading_Elements) that match the functional notation. In other words, the `:heading()` functional pseudo-class allows you to style all headings that match the functional notation at once, rather than individually.
+
+> [!NOTE]
+> The `:heading()` pseudo-class has the specificity of that of a class. So `:heading() {…}` would have a specificity of [0,1,0], whereas `section:heading() {…}` would have a specificity of [0,1,1].
+
+## Syntax
+
+```css-nolint
+:heading([ <An+B> | even | odd ]) {
+  /* ... */
+}
+```
+
+### Parameters
+
+The `:heading()` pseudo-class function takes a single argument that describes a pattern for matching heading element.
+
+#### Keyword values
+
+- `odd`
+  - : Represents the heading elements whose numeric position is odd: `<h1>`, `<h3>`, and `<h5>`.
+- `even`
+  - : Represents the heading elements whose numeric position is even: `<h2>`, `<h4>`, and `<h6>`.
+
+#### Functional notation
+
+- `<An+B>`
+  - : Represents the heading elements whose numeric position matches the pattern `An+B`, for every positive integer or zero value of `n`, where:
+    - `A` is an integer step size,
+    - `B` is an integer offset,
+    - `n` is all nonnegative integers, starting from 0.
+
+    It can be read as the `An+B`-th element of a list. The `A` and `B` must both have {{cssxref("&lt;integer&gt;")}} values.
+
+## Examples
+
+### Keyword example
+
+In this example the `odd` keyword is used target the `<h1>`, `<h3>`, and `<h5>` elements while the `even` keyword is used to target the `<h2>`, `<h4>`, and `<h6>` elements.
+
+```html
+<h1>Heading 1</h1>
+<h2>Heading 2</h2>
+<h3>Heading 3</h3>
+<h4>Heading 4</h4>
+```
+
+```css
+:heading(odd) {
+  color: tomato;
+}
+:heading(even) {
+  color: slateblue;
+}
+```
+
+{{EmbedLiveSample("Keyword_example", "", "215")}}
+
+### Functional notation example
+
+```html
+<h1>Heading 1</h1>
+<h2>Heading 2</h2>
+<h3>Heading 3</h3>
+<h4>Heading 4</h4>
+<h5>Heading 5</h5>
+<h6>Heading 6</h6>
+```
+
+```css hidden
+main {
+  display: flex;
+  justify-content: space-around;
+}
+```
+
+The `:heading(3, 4)` matches the `<h3>` and `<h4>` elements.
+
+```css
+:heading(3, 4) {
+  text-decoration: tomato wavy underline;
+}
+```
+
+The `:heading(-n + 3)` matches the heading elements in reverse (negatively) from `<h3>`.
+
+```css
+:heading(-n + 3) {
+  color: tomato;
+}
+```
+
+The `:heading(3n + 1)` matches every third (`3n`) heading element from and including the first`<h1>` elements.
+
+```css
+:heading(3n + 1) {
+  font-style: italic;
+}
+```
+
+The `:heading(n + 5)` matches the heading elements from `<h5>`.
+
+```css
+:heading(n + 5) {
+  color: slateblue;
+}
+```
+
+{{EmbedLiveSample("Functional_notation_example", "", "292")}}
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{CSSXRef(":heading")}}

files/en-us/web/css/pseudo-classes/index.md

@@ -32,6 +32,8 @@ These pseudo-classes relate to the core identity of elements.
 
 - {{CSSxRef(":defined")}}
   - : Matches any element that is defined.
+- {{CSSxRef(":heading")}}
+  - : Matches any heading element (`<h1>`-`<h6>`).
 
 ## Element display state pseudo-classes
 
@@ -165,6 +167,8 @@ These pseudo-classes relate to the location of an element within the document tr
   - : Matches an element that is the last of its siblings.
 - {{CSSxRef(":only-child")}}
   - : Matches an element that has no siblings. For example, a list item with no other list items in that list.
+- {{CSSXRef(":heading_function", ":heading()")}}
+  - : Uses `An+B` notation to select heading elements (`<h1>`-`<h6>`).
 - {{CSSxRef(":nth-of-type", ":nth-of-type()")}}
   - : Uses `An+B` notation to select elements from a list of sibling elements that match a certain type from a list of sibling elements.
 - {{CSSxRef(":nth-last-of-type", ":nth-last-of-type()")}}
@@ -308,6 +312,8 @@ H
 
 - {{CSSxRef(":has-slotted")}}
 - {{CSSxRef(":has", ":has()")}}
+- {{CSSXRef(":heading")}}
+- {{CSSXRef(":heading_function", ":heading()")}}
 - {{CSSxRef(":host")}}
 - {{CSSxRef(":host_function", ":host()")}}
 - {{CSSxRef(":host-context", ":host-context()")}}