CSS Properties: How to set a number sections and sub-sections with section?

Last update on February 22 2024 12:45:03 (UTC/GMT +8 hours)

Solution:

HTML Code:

<!DOCTYPE html><!-- Specifies the document type and version of HTML -->
<html>
<head>
<title>How to set a number sections and sub-sections with section</title><!-- Sets the title of the HTML document -->
<style type="text/css"> /* Begins a CSS style block */
body {
 counter-reset: section; /* Resets the counter named "section" for the entire document */
}
h1 {
 counter-reset: subsection; /* Resets the counter named "subsection" for each <h1> element */
}
h1:before {
 counter-increment: section; /* Increments the counter named "section" */
 content: "Section " counter(section) ". "; /* Sets the content before each <h1> element to "Section" followed by the current value of the "section" counter */
}
h2:before {
 counter-increment: subsection; /* Increments the counter named "subsection" */
 content: counter(section) "." counter(subsection) " "; /* Sets the content before each <h2> element to the current value of the "section" counter followed by a dot and the current value of the "subsection" counter */
}
</style><!-- Ends the CSS style block -->
</head>
<body>
<h1>HTML tutorials</h1><!-- Inserts an <h1> element with the specified content -->
<h2>HTML Tutorial</h2><!-- Inserts an <h2> element with the specified content -->
<h2>CSS Tutorial</h2><!-- Inserts an <h2> element with the specified content -->
<h2>HTML5 Tutorial</h2><!-- Inserts an <h2> element with the specified content -->
<h1>Database tutorials</h1><!-- Inserts an <h1> element with the specified content -->
<h2>SQL</h2><!-- Inserts an <h2> element with the specified content -->
<h2>MySQL</h2><!-- Inserts an <h2> element with the specified content -->
<h2>PostgreSQL</h2><!-- Inserts an <h2> element with the specified content -->
<h1>Exercises</h1><!-- Inserts an <h1> element with the specified content -->
<h2>HTML CSS</h2><!-- Inserts an <h2> element with the specified content -->
<h2>JavaScript</h2><!-- Inserts an <h2> element with the specified content -->
<h2>jQuery</h2><!-- Inserts an <h2> element with the specified content -->
<h2>PHP</h2><!-- Inserts an <h2> element with the specified content -->
</body>
</html>

Explanation:

This HTML document demonstrates how to use CSS counters to create section and sub-section numbering for headings.
The CSS rule body resets the counter named "section" for the entire document.
The CSS rule h1 resets the counter named "subsection" for each <h1> element.
The CSS rule h1:before increments the "section" counter and sets the content before each <h1> element to "Section" followed by the current value of the "section" counter.
The CSS rule h2:before increments the "subsection" counter and sets the content before each <h2> element to the current value of the "section" counter followed by a dot and the current value of the "subsection" counter.

Live Demo:

See the Pen counter-reset-answer by w3resource (@w3resource) on CodePen.

See the solution in the browser

Supported browser


Yes	Yes	Yes	Yes	Yes

Go to Exercise page