Skip to content

Commit 29033c0

Browse files
dletoreygithub-actions[bot]dipikabhcaugner
authored
40483 heading selectors (mdn#40649)
* added the :heading and :heading pages * finshed the :heading & :heading() pages * added note to :heading() and added both to pseudo-classes page * Update files/en-us/web/css/_colon_heading_function/index.md Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * Update files/en-us/web/css/_colon_heading_function/index.md Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * Update files/en-us/web/css/_colon_heading_function/index.md Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * made explanation match code example * Update files/en-us/web/css/_colon_heading/index.md Co-authored-by: Dipika Bhattacharya <dipika@foss-community.org> * Update files/en-us/web/css/_colon_heading/index.md Co-authored-by: Dipika Bhattacharya <dipika@foss-community.org> * Update files/en-us/web/css/_colon_heading/index.md Co-authored-by: Dipika Bhattacharya <dipika@foss-community.org> * Update files/en-us/web/css/_colon_heading/index.md Co-authored-by: Dipika Bhattacharya <dipika@foss-community.org> * Update files/en-us/web/css/_colon_heading/index.md Co-authored-by: Dipika Bhattacharya <dipika@foss-community.org> * Update files/en-us/web/css/_colon_heading/index.md Co-authored-by: Dipika Bhattacharya <dipika@foss-community.org> * Update files/en-us/web/css/_colon_heading/index.md Co-authored-by: Dipika Bhattacharya <dipika@foss-community.org> * Update files/en-us/web/css/_colon_heading_function/index.md Co-authored-by: Dipika Bhattacharya <dipika@foss-community.org> * Update files/en-us/web/css/_colon_heading_function/index.md Co-authored-by: Dipika Bhattacharya <dipika@foss-community.org> * Update files/en-us/web/css/_colon_heading_function/index.md Co-authored-by: Dipika Bhattacharya <dipika@foss-community.org> * Update files/en-us/web/css/_colon_heading_function/index.md Co-authored-by: Dipika Bhattacharya <dipika@foss-community.org> * Update files/en-us/web/css/_colon_heading/index.md Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * fixed code blocks * Update files/en-us/web/css/_colon_heading_function/index.md Co-authored-by: Dipika Bhattacharya <dipika@foss-community.org> * updated the Note & parameters * fixed the syntax example * added a note about matching attributes * moved the note to usage notes * Update files/en-us/web/css/_colon_heading/index.md Co-authored-by: Dipika Bhattacharya <dipika@foss-community.org> * Update files/en-us/web/css/_colon_heading_function/index.md Co-authored-by: Dipika Bhattacharya <dipika@foss-community.org> * Update files/en-us/web/css/_colon_heading_function/index.md Co-authored-by: Dipika Bhattacharya <dipika@foss-community.org> * Update files/en-us/web/css/_colon_heading_function/index.md Co-authored-by: Dipika Bhattacharya <dipika@foss-community.org> * Update files/en-us/web/css/_colon_heading_function/index.md Co-authored-by: Dipika Bhattacharya <dipika@foss-community.org> * Update files/en-us/web/css/_colon_heading_function/index.md Co-authored-by: Dipika Bhattacharya <dipika@foss-community.org> --------- Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: Dipika Bhattacharya <dipika@foss-community.org> Co-authored-by: Claas Augner <495429+caugner@users.noreply.github.com>
1 parent 75da34b commit 29033c0

File tree

3 files changed

+187
-0
lines changed

3 files changed

+187
-0
lines changed

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

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
---
2+
title: :heading
3+
slug: Web/CSS/:heading
4+
page-type: css-pseudo-class
5+
browser-compat: css.selectors.heading
6+
sidebar: cssref
7+
---
8+
9+
The **`:heading`** [CSS](/en-US/docs/Web/CSS) [pseudo-class](/en-US/docs/Web/CSS/Pseudo-classes) matches all [heading elements](/en-US/docs/Web/HTML/Reference/Elements/Heading_Elements) in a document. This allows you to style all headings at once, rather than matching and styling them individually.
10+
This pseudo-class matches only elements that are semantically recognized as headings (`<h1>` through `<h6>`). Elements with [`role="heading"`](/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/heading_role) are not matched; you can select those by using the functional form, {{CSSXRef(":heading_function", ":heading()")}}.
11+
12+
> [!NOTE]
13+
> The `:heading` pseudo-class has the same [specificity](/en-US/docs/Web/CSS/CSS_cascade/Specificity#how_is_specificity_calculated) as a class selector, that is, `0-1-0`. So `:heading` would have a specificity of `0-1-0`, and `section:heading` would have a specificity of `0-1-1`.
14+
15+
## Syntax
16+
17+
```css
18+
:heading {
19+
/* ... */
20+
}
21+
```
22+
23+
## Examples
24+
25+
### Styling all headings
26+
27+
The document in this example contains headings at three different levels.
28+
29+
```html
30+
<h1>Mastering CSS</h1>
31+
<h2>Chapter 1: Selectors</h2>
32+
<h3>1.1 Pseudo-classes</h3>
33+
```
34+
35+
```css
36+
:heading {
37+
color: tomato;
38+
}
39+
```
40+
The `:heading` pseudo-class applies the `color` to all the headings in the document:
41+
42+
{{EmbedLiveSample("styling_all_headings", "", "170")}}
43+
44+
The `:heading` pseudo-class applies the `color` to all the headings in the document.
45+
46+
## Specifications
47+
48+
{{Specifications}}
49+
50+
## Browser compatibility
51+
52+
{{Compat}}
53+
54+
## See also
55+
56+
- {{CSSXRef(":heading_function", ":heading()")}}

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

Lines changed: 125 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,125 @@
1+
---
2+
title: :heading()
3+
slug: Web/CSS/:heading_function
4+
page-type: css-pseudo-class
5+
browser-compat: css.selectors.headingfunction
6+
sidebar: cssref
7+
---
8+
9+
The **`:heading()`** [CSS](/en-US/docs/Web/CSS) [pseudo-class](/en-US/docs/Web/CSS/Pseudo-classes) function represents all [heading elements](/en-US/docs/Web/HTML/Reference/Elements/Heading_Elements) that match a value calculated using the `An+B` notation. This allows you to style elements at specific heading levels at once, rather than matching and styling them individually.
10+
11+
> [!NOTE]
12+
> The `:heading()` functional pseudo-class has the same [specificity](/en-US/docs/Web/CSS/CSS_cascade/Specificity#how_is_specificity_calculated) as a class selector, that is, `0-1-0`. So `:heading()` would have a specificity of `0-1-0`, and `section:heading()` would have a specificity of `0-1-1`.
13+
14+
## Syntax
15+
16+
```css-nolint
17+
:heading([ <An+B> [, <An+B>]* | even | odd ]) {
18+
/* ... */
19+
}
20+
```
21+
22+
### Parameters
23+
24+
The `:heading()` pseudo-class function takes a comma-separated list of `An+B` expressions or keyword values that describe a pattern for matching heading elements.
25+
26+
#### Keyword values
27+
28+
- `odd`
29+
- : Represents the heading elements whose numeric position is odd: `<h1>`, `<h3>`, and `<h5>`.
30+
- `even`
31+
- : Represents the heading elements whose numeric position is even: `<h2>`, `<h4>`, and `<h6>`.
32+
33+
#### Functional notation
34+
35+
- `<An+B>`
36+
- : Represents the heading elements whose numeric position matches the pattern `An+B`, for every positive integer or zero value of `n`, where:
37+
- `A` is an integer step size,
38+
- `B` is an integer offset,
39+
- `n` is all nonnegative integers, starting from 0.
40+
41+
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.
42+
43+
## Usage notes
44+
45+
The `:heading()` functional pseudo-class matches only elements that are semantically recognized as headings. It does not match elements with a [`role="heading"`](/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/heading_role) attribute, nor does it respect the ['aria-level'](/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-level) ARIA attribute.
46+
47+
## Examples
48+
49+
### Using keyword parameters
50+
51+
In this example, the `odd` keyword matches headings with odd-numbered levels, which are `<h1>` and `<h3>`. The `even` keyword is used to target even-numbered heading levels, `<h2>` and `<h4>`.
52+
53+
```html
54+
<h1>Heading 1</h1>
55+
<h2>Heading 2</h2>
56+
<h3>Heading 3</h3>
57+
<h4>Heading 4</h4>
58+
```
59+
60+
```css
61+
:heading(odd) {
62+
color: tomato;
63+
}
64+
:heading(even) {
65+
color: slateblue;
66+
}
67+
```
68+
69+
{{EmbedLiveSample("Keyword_example", "", "215")}}
70+
71+
### Using the `An+B` notation
72+
73+
```html
74+
<h1>Science</h1>
75+
<h2>Physics</h2>
76+
<h3>Atomic, molecular, and optical physics</h3>
77+
<h4>Optical physics</h4>
78+
<h5>X-Rays</h5>
79+
<h6>Discovery</h6>
80+
```
81+
82+
```css hidden
83+
main {
84+
display: flex;
85+
justify-content: space-around;
86+
}
87+
```
88+
89+
```css
90+
/* Targets headings <h3> and <h4> */
91+
:heading(3, 4) {
92+
font-weight: 100;
93+
}
94+
/* Targets headings in reverse starting from <h3> */
95+
:heading(-n + 3) {
96+
color: tomato;
97+
}
98+
/* Targets every third heading starting from <h1> */
99+
:heading(3n + 1) {
100+
font-style: italic;
101+
}
102+
/* Targets headings after level 5 */
103+
:heading(n + 5) {
104+
color: slateblue;
105+
}
106+
107+
In this example:
108+
- `:heading(3, 4)` matches the `<h3>` and `<h4>` elements
109+
- `:heading(-n + 3)` matches heading elements in reverse, so `<h3>`, `<h2>`, and `<h1>`
110+
- `:heading(3n + 1)` matches every third (`3n`) heading element starting from `<h1>`, so this would include `<h1>` and `<h4>`
111+
- `:heading(n + 5)` matches heading elements starting from `<h5>` and will include `<h6>`
112+
113+
{{EmbedLiveSample("Functional_notation_example", "", "292")}}
114+
115+
## Specifications
116+
117+
{{Specifications}}
118+
119+
## Browser compatibility
120+
121+
{{Compat}}
122+
123+
## See also
124+
125+
- {{CSSXRef(":heading")}}

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

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,8 @@ These pseudo-classes relate to the core identity of elements.
3232

3333
- {{CSSxRef(":defined")}}
3434
- : Matches any element that is defined.
35+
- {{CSSxRef(":heading")}}
36+
- : Matches any heading element (`<h1>`-`<h6>`).
3537

3638
## Element display state pseudo-classes
3739

@@ -165,6 +167,8 @@ These pseudo-classes relate to the location of an element within the document tr
165167
- : Matches an element that is the last of its siblings.
166168
- {{CSSxRef(":only-child")}}
167169
- : Matches an element that has no siblings. For example, a list item with no other list items in that list.
170+
- {{CSSXRef(":heading_function", ":heading()")}}
171+
- : Uses `An+B` notation to select heading elements (`<h1>`-`<h6>`).
168172
- {{CSSxRef(":nth-of-type", ":nth-of-type()")}}
169173
- : Uses `An+B` notation to select elements from a list of sibling elements that match a certain type from a list of sibling elements.
170174
- {{CSSxRef(":nth-last-of-type", ":nth-last-of-type()")}}
@@ -308,6 +312,8 @@ H
308312

309313
- {{CSSxRef(":has-slotted")}}
310314
- {{CSSxRef(":has", ":has()")}}
315+
- {{CSSXRef(":heading")}}
316+
- {{CSSXRef(":heading_function", ":heading()")}}
311317
- {{CSSxRef(":host")}}
312318
- {{CSSxRef(":host_function", ":host()")}}
313319
- {{CSSxRef(":host-context", ":host-context()")}}

0 commit comments

Comments
 (0)