Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[css-selectors-5] add :heading, :heading(An+B) pseudo classes #11836

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
+33 −0
Open

[css-selectors-5] add :heading, :heading(An+B) pseudo classes #11836

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
33 changes: 33 additions & 0 deletions selectors-5/Overview.bs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ Abstract: Selectors Level 5 describes the selectors that already exist in [[!sel
<pre class="link-defaults">
spec:selectors-4; type:dfn; text:selector
spec:html; type:dfn; text:states set
spec:html; type:dfn; text:heading level
</pre>

<h2 id="intro">
Expand Down Expand Up @@ -154,6 +155,37 @@ Exposing custom state: the '':state()'' pseudo-class</h2>
see <a href="https://html.spec.whatwg.org/multipage/custom-elements.html#custom-state-pseudo-class">HTML's definition</a> for more detail.
Other host languages must define how this pseudo-class matches.

<h2 id="headings">
Heading Structures: the heading pseudo-classes '':heading'', and '':heading()''</h2>

The (non-functional) <dfn id='heading-pseudo'>:heading</dfn> pseudo-class
matches an element which has a <a>heading level</a>, with respect to the
semantics defined by the document language (e.g. [[HTML5]]).

<div class="example">
For example, the following sheet contains a rule applying to all heading
elements in the current page:

<pre>:heading { text-decoration: underline; }</pre>
</div>

As a functional pseudo-class,
<dfn id='heading-functional-pseudo' lt=':heading()'>:heading(<var>An+B</var>)</dfn>
notation represents elements that have a <a>heading level</a> among <var>An+B</var>.

<div class="example">
The following example styles headings with levels between 1 and 3 with a
font-weight of 900, while headings with levels 6 onward with font-weight of
500:

<pre>:heading(-n+3) { font-weight: 900; }</pre>
<pre>:heading(n+6) { font-weight: 500; }</pre>
</div>

Note: The <a>heading level</a> might be different from an element's
<a>type selector</a>. Thus, a selector ''h1:heading(3)'' matches any
''h1'' tag which has an exposed heading level of 3.

<h2 id="combinators">
Combinators</h2>

Expand Down Expand Up @@ -202,6 +234,7 @@ Changes Since Level 4</h3>
<li>The functional form of the '':local-link'' pseudo-class
(deferred from an <a href="https://www.w3.org/TR/2013/WD-selectors4-20130502/">earlier draft</a> of Selectors 4)</li>
<li>The '':state()'' pseudo-class</li>
<li>The '':heading'' and '':heading()'' pseudo-classes</li>
</ul>

<h2 id="acknowledgements">
Expand Down