Counter keeps resetting in HTML/CSS Announcing the arrival of Valued Associate #679: Cesar Manara Planned maintenance scheduled April 23, 2019 at 00:00UTC (8:00pm US/Eastern) Data science time! April 2019 and salary with experience The Ask Question Wizard is Live!CSS auto numbering without nested sectionWhat are valid values for the id attribute in HTML?Set cellpadding and cellspacing in CSS?Convert HTML + CSS to PDF with PHP?How do I give text or an image a transparent background using CSS?Is there a CSS parent selector?When to use margin vs padding in CSSChange an HTML5 input's placeholder color with CSSWhy does HTML think “chucknorris” is a color?How do I vertically center text with CSS?Is it possible to apply CSS to half of a character?
How does light 'choose' between wave and particle behaviour?
What is "gratricide"?
Dating a Former Employee
Why is it faster to reheat something than it is to cook it?
What is the appropriate index architecture when forced to implement IsDeleted (soft deletes)?
If Windows 7 doesn't support WSL, then what does Linux subsystem option mean?
What would you call this weird metallic apparatus that allows you to lift people?
What initially awakened the Balrog?
What was the first language to use conditional keywords?
How often does castling occur in grandmaster games?
Amount of permutations on an NxNxN Rubik's Cube
What do you call the main part of a joke?
A term for a woman complaining about things/begging in a cute/childish way
Do I really need to have a message in a novel to appeal to readers?
How fail-safe is nr as stop bytes?
Project Euler #1 in C++
Is a ledger board required if the side of my house is wood?
How to install press fit bottom bracket into new frame
Maximum summed subsequences with non-adjacent items
Illegal assignment from sObject to Id
Should I use a zero-interest credit card for a large one-time purchase?
Drawing without replacement: why is the order of draw irrelevant?
Find 108 by using 3,4,6
How come Sam didn't become Lord of Horn Hill?
Counter keeps resetting in HTML/CSS
Announcing the arrival of Valued Associate #679: Cesar Manara
Planned maintenance scheduled April 23, 2019 at 00:00UTC (8:00pm US/Eastern)
Data science time! April 2019 and salary with experience
The Ask Question Wizard is Live!CSS auto numbering without nested sectionWhat are valid values for the id attribute in HTML?Set cellpadding and cellspacing in CSS?Convert HTML + CSS to PDF with PHP?How do I give text or an image a transparent background using CSS?Is there a CSS parent selector?When to use margin vs padding in CSSChange an HTML5 input's placeholder color with CSSWhy does HTML think “chucknorris” is a color?How do I vertically center text with CSS?Is it possible to apply CSS to half of a character?
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty height:90px;width:728px;box-sizing:border-box;
0
I am trying to write an electronic book, and I'm having problems with counters for managing chapters/sections/subsections.
body
counter-reset: chapter;
counter-reset: section;
counter-reset: subsection;
h1.chapter::before
counter-reset: section;
counter-reset: subsection;
counter-increment: chapter;
content: "Chapter " counter(chapter) ": ";
h2.section::before
counter-reset: subsection;
counter-increment: section;
content: "Section " counter(chapter) "." counter(section) ": ";
h3.subsection::before
counter-increment: subsection;
content: "Subsection " counter(chapter) "." counter(section) "." counter(subsection) ": ";
<h1 class="chapter"> The first chapter</h1>
<h2 class="section"> The first section </h2>
<h2 class="section"> The second section </h2>
<h3 class="subsection"> The first subsection </h3>
<h3 class="subsection"> The second subsection </h3>
<h1 class="chapter"> The second chapter</h1>
<h2 class="section"> The second chapter's first section</h2>
<h3 class="subsection"> The second chapter's first subsection </h3>and this is what shows up:
So I have no idea why the chapter and section just don't stick while `subsection' doesn't reset...
html css css-counter
edited Mar 8 at 20:32
j08691
168k20199215
asked Mar 8 at 20:27
QuestionerQuestioner
1084
add a comment |
0
I am trying to write an electronic book, and I'm having problems with counters for managing chapters/sections/subsections.
body
counter-reset: chapter;
counter-reset: section;
counter-reset: subsection;
h1.chapter::before
counter-reset: section;
counter-reset: subsection;
counter-increment: chapter;
content: "Chapter " counter(chapter) ": ";
h2.section::before
counter-reset: subsection;
counter-increment: section;
content: "Section " counter(chapter) "." counter(section) ": ";
h3.subsection::before
counter-increment: subsection;
content: "Subsection " counter(chapter) "." counter(section) "." counter(subsection) ": ";
<h1 class="chapter"> The first chapter</h1>
<h2 class="section"> The first section </h2>
<h2 class="section"> The second section </h2>
<h3 class="subsection"> The first subsection </h3>
<h3 class="subsection"> The second subsection </h3>
<h1 class="chapter"> The second chapter</h1>
<h2 class="section"> The second chapter's first section</h2>
<h3 class="subsection"> The second chapter's first subsection </h3>and this is what shows up:
So I have no idea why the chapter and section just don't stick while `subsection' doesn't reset...
html css css-counter
edited Mar 8 at 20:32
j08691
168k20199215
asked Mar 8 at 20:27
QuestionerQuestioner
1084
add a comment |
0
0
0
I am trying to write an electronic book, and I'm having problems with counters for managing chapters/sections/subsections.
body
counter-reset: chapter;
counter-reset: section;
counter-reset: subsection;
h1.chapter::before
counter-reset: section;
counter-reset: subsection;
counter-increment: chapter;
content: "Chapter " counter(chapter) ": ";
h2.section::before
counter-reset: subsection;
counter-increment: section;
content: "Section " counter(chapter) "." counter(section) ": ";
h3.subsection::before
counter-increment: subsection;
content: "Subsection " counter(chapter) "." counter(section) "." counter(subsection) ": ";
<h1 class="chapter"> The first chapter</h1>
<h2 class="section"> The first section </h2>
<h2 class="section"> The second section </h2>
<h3 class="subsection"> The first subsection </h3>
<h3 class="subsection"> The second subsection </h3>
<h1 class="chapter"> The second chapter</h1>
<h2 class="section"> The second chapter's first section</h2>
<h3 class="subsection"> The second chapter's first subsection </h3>and this is what shows up:
So I have no idea why the chapter and section just don't stick while `subsection' doesn't reset...
html css css-counter
edited Mar 8 at 20:32
j08691
168k20199215
asked Mar 8 at 20:27
QuestionerQuestioner
1084
I am trying to write an electronic book, and I'm having problems with counters for managing chapters/sections/subsections.
body
counter-reset: chapter;
counter-reset: section;
counter-reset: subsection;
h1.chapter::before
counter-reset: section;
counter-reset: subsection;
counter-increment: chapter;
content: "Chapter " counter(chapter) ": ";
h2.section::before
counter-reset: subsection;
counter-increment: section;
content: "Section " counter(chapter) "." counter(section) ": ";
h3.subsection::before
counter-increment: subsection;
content: "Subsection " counter(chapter) "." counter(section) "." counter(subsection) ": ";
<h1 class="chapter"> The first chapter</h1>
<h2 class="section"> The first section </h2>
<h2 class="section"> The second section </h2>
<h3 class="subsection"> The first subsection </h3>
<h3 class="subsection"> The second subsection </h3>
<h1 class="chapter"> The second chapter</h1>
<h2 class="section"> The second chapter's first section</h2>
<h3 class="subsection"> The second chapter's first subsection </h3>and this is what shows up:
So I have no idea why the chapter and section just don't stick while `subsection' doesn't reset...
body
counter-reset: chapter;
counter-reset: section;
counter-reset: subsection;
h1.chapter::before
counter-reset: section;
counter-reset: subsection;
counter-increment: chapter;
content: "Chapter " counter(chapter) ": ";
h2.section::before
counter-reset: subsection;
counter-increment: section;
content: "Section " counter(chapter) "." counter(section) ": ";
h3.subsection::before
counter-increment: subsection;
content: "Subsection " counter(chapter) "." counter(section) "." counter(subsection) ": ";
<h1 class="chapter"> The first chapter</h1>
<h2 class="section"> The first section </h2>
<h2 class="section"> The second section </h2>
<h3 class="subsection"> The first subsection </h3>
<h3 class="subsection"> The second subsection </h3>
<h1 class="chapter"> The second chapter</h1>
<h2 class="section"> The second chapter's first section</h2>
<h3 class="subsection"> The second chapter's first subsection </h3>body
counter-reset: chapter;
counter-reset: section;
counter-reset: subsection;
h1.chapter::before
counter-reset: section;
counter-reset: subsection;
counter-increment: chapter;
content: "Chapter " counter(chapter) ": ";
h2.section::before
counter-reset: subsection;
counter-increment: section;
content: "Section " counter(chapter) "." counter(section) ": ";
h3.subsection::before
counter-increment: subsection;
content: "Subsection " counter(chapter) "." counter(section) "." counter(subsection) ": ";
<h1 class="chapter"> The first chapter</h1>
<h2 class="section"> The first section </h2>
<h2 class="section"> The second section </h2>
<h3 class="subsection"> The first subsection </h3>
<h3 class="subsection"> The second subsection </h3>
<h1 class="chapter"> The second chapter</h1>
<h2 class="section"> The second chapter's first section</h2>
<h3 class="subsection"> The second chapter's first subsection </h3>html css css-counter
html css css-counter
edited Mar 8 at 20:32
j08691
168k20199215
asked Mar 8 at 20:27
QuestionerQuestioner
1084
edited Mar 8 at 20:32
j08691
168k20199215
asked Mar 8 at 20:27
QuestionerQuestioner
1084
edited Mar 8 at 20:32
j08691
168k20199215
edited Mar 8 at 20:32
j08691
168k20199215
edited Mar 8 at 20:32
j08691
168k20199215
168k20199215
asked Mar 8 at 20:27
QuestionerQuestioner
1084
asked Mar 8 at 20:27
QuestionerQuestioner
1084
asked Mar 8 at 20:27
QuestionerQuestioner
1084
1084
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
3
You need to move the reset from the pseudo element. Also, you can reformat the counter-reset on the body to include all of them in one statement.
body
counter-reset: chapter section subsection;
h1.chapter::before
counter-increment: chapter;
content: "Chapter " counter(chapter) ": ";
h1.chapter
counter-reset: section;
h2.section::before
counter-increment: section;
content: "Section " counter(chapter) "." counter(section) ": ";
h2.section
counter-reset: subsection;
h3.subsection::before
counter-increment: subsection;
content: "Subsection " counter(chapter) "." counter(section) "." counter(subsection) ": ";
<h1 class="chapter"> The first chapter</h1>
<h2 class="section"> The first section </h2>
<h2 class="section"> The second section </h2>
<h3 class="subsection"> The first subsection </h3>
<h3 class="subsection"> The second subsection </h3>
<h1 class="chapter"> The second chapter</h1>
<h2 class="section"> The second chapter's first section</h2>
<h3 class="subsection"> The second chapter's first subsection </h3>Here is a fiddle to play with:
https://jsfiddle.net/muc0q9aw/
answered Mar 8 at 20:45
disinfordisinfor
3,16512031
Thanks. I guess I need to learn more about 'pseudo-elements' now ;)
– Questioner
Mar 8 at 21:13
1
They're fun! The thing to keep in mind is the::beforeand::afterpseudo elements are like blank spaces that don't appear in the DOM but are attached to the element you add them to - so when you had thecounter-reseton the::beforepseudo, it had no connection to the following elements (h2,h3in your case). That's really a layman's basic explanation :)
– disinfor
Mar 8 at 21:23
add a comment |
2
You have to use only one reset per element or you will simply override the first ones with the last one like with any properties.
You should also pay attention to where you need to use counter-reset:
Counters are "self-nesting", in the sense that resetting a counter in a descendant element or pseudo-element automatically creates a new instance of the counter.
Then
The scope of a counter starts at the first element in the document that has a 'counter-reset' for that counter and includes the element's descendants and its following siblings with their descendants ref
Considering this you shouldn't reset the counter inside a pseudo-element but the element itself so that the sibling elements will have the good value.
body
counter-reset: chapter section subsection;
h1.chapter
counter-reset: section subsection;
h1.chapter::before
counter-increment: chapter;
content: "Chapter " counter(chapter) ": ";
h2.section
counter-reset: subsection;
h2.section::before
counter-increment: section;
content: "Section " counter(chapter) "." counter(section) ": ";
h3.subsection::before
counter-increment: subsection;
content: "Subsection " counter(chapter) "." counter(section) "." counter(subsection) ": ";
<h1 class="chapter"> The first chapter</h1>
<h2 class="section"> The first section </h2>
<h2 class="section"> The second section </h2>
<h3 class="subsection"> The first subsection </h3>
<h3 class="subsection"> The second subsection </h3>
<h1 class="chapter"> The second chapter</h1>
<h2 class="section"> The second chapter's first section</h2>
<h3 class="subsection"> The second chapter's first subsection </h3>You can also simplify your code like below:
body
counter-reset: chapter; /*we reset the chapter once*/
h1.chapter
counter-reset: section; /*we reset the section each chapter*/
h1.chapter::before
counter-increment: chapter;
content: "Chapter " counter(chapter) ": ";
h2.section
counter-reset: subsection; /*we reset the subsection each section*/
h2.section::before
counter-increment: section;
content: "Section " counter(chapter) "." counter(section) ": ";
h3.subsection::before
counter-increment: subsection;
content: "Subsection " counter(chapter) "." counter(section) "." counter(subsection) ": ";
<h1 class="chapter"> The first chapter</h1>
<h2 class="section"> The first section </h2>
<h2 class="section"> The second section </h2>
<h3 class="subsection"> The first subsection </h3>
<h3 class="subsection"> The second subsection </h3>
<h1 class="chapter"> The second chapter</h1>
<h2 class="section"> The second chapter's first section</h2>
<h3 class="subsection"> The second chapter's first subsection </h3>answered Mar 8 at 20:42
Temani AfifTemani Afif
83.7k104795
How did I not see your answer when I was posting mine?! Oh well, take an upvote.
– disinfor
Mar 8 at 20:49
1
@disinfor I hit the submit too fast, so I had to delete for a short moment to edit then undelete ;)
– Temani Afif
Mar 8 at 20:51
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55070530%2fcounter-keeps-resetting-in-html-css%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
3
You need to move the reset from the pseudo element. Also, you can reformat the counter-reset on the body to include all of them in one statement.
body
counter-reset: chapter section subsection;
h1.chapter::before
counter-increment: chapter;
content: "Chapter " counter(chapter) ": ";
h1.chapter
counter-reset: section;
h2.section::before
counter-increment: section;
content: "Section " counter(chapter) "." counter(section) ": ";
h2.section
counter-reset: subsection;
h3.subsection::before
counter-increment: subsection;
content: "Subsection " counter(chapter) "." counter(section) "." counter(subsection) ": ";
<h1 class="chapter"> The first chapter</h1>
<h2 class="section"> The first section </h2>
<h2 class="section"> The second section </h2>
<h3 class="subsection"> The first subsection </h3>
<h3 class="subsection"> The second subsection </h3>
<h1 class="chapter"> The second chapter</h1>
<h2 class="section"> The second chapter's first section</h2>
<h3 class="subsection"> The second chapter's first subsection </h3>Here is a fiddle to play with:
https://jsfiddle.net/muc0q9aw/
answered Mar 8 at 20:45
disinfordisinfor
3,16512031
Thanks. I guess I need to learn more about 'pseudo-elements' now ;)
– Questioner
Mar 8 at 21:13
1
They're fun! The thing to keep in mind is the::beforeand::afterpseudo elements are like blank spaces that don't appear in the DOM but are attached to the element you add them to - so when you had thecounter-reseton the::beforepseudo, it had no connection to the following elements (h2,h3in your case). That's really a layman's basic explanation :)
– disinfor
Mar 8 at 21:23
add a comment |
3
You need to move the reset from the pseudo element. Also, you can reformat the counter-reset on the body to include all of them in one statement.
body
counter-reset: chapter section subsection;
h1.chapter::before
counter-increment: chapter;
content: "Chapter " counter(chapter) ": ";
h1.chapter
counter-reset: section;
h2.section::before
counter-increment: section;
content: "Section " counter(chapter) "." counter(section) ": ";
h2.section
counter-reset: subsection;
h3.subsection::before
counter-increment: subsection;
content: "Subsection " counter(chapter) "." counter(section) "." counter(subsection) ": ";
<h1 class="chapter"> The first chapter</h1>
<h2 class="section"> The first section </h2>
<h2 class="section"> The second section </h2>
<h3 class="subsection"> The first subsection </h3>
<h3 class="subsection"> The second subsection </h3>
<h1 class="chapter"> The second chapter</h1>
<h2 class="section"> The second chapter's first section</h2>
<h3 class="subsection"> The second chapter's first subsection </h3>Here is a fiddle to play with:
https://jsfiddle.net/muc0q9aw/
answered Mar 8 at 20:45
disinfordisinfor
3,16512031
Thanks. I guess I need to learn more about 'pseudo-elements' now ;)
– Questioner
Mar 8 at 21:13
1
They're fun! The thing to keep in mind is the::beforeand::afterpseudo elements are like blank spaces that don't appear in the DOM but are attached to the element you add them to - so when you had thecounter-reseton the::beforepseudo, it had no connection to the following elements (h2,h3in your case). That's really a layman's basic explanation :)
– disinfor
Mar 8 at 21:23
add a comment |
3
3
3
You need to move the reset from the pseudo element. Also, you can reformat the counter-reset on the body to include all of them in one statement.
body
counter-reset: chapter section subsection;
h1.chapter::before
counter-increment: chapter;
content: "Chapter " counter(chapter) ": ";
h1.chapter
counter-reset: section;
h2.section::before
counter-increment: section;
content: "Section " counter(chapter) "." counter(section) ": ";
h2.section
counter-reset: subsection;
h3.subsection::before
counter-increment: subsection;
content: "Subsection " counter(chapter) "." counter(section) "." counter(subsection) ": ";
<h1 class="chapter"> The first chapter</h1>
<h2 class="section"> The first section </h2>
<h2 class="section"> The second section </h2>
<h3 class="subsection"> The first subsection </h3>
<h3 class="subsection"> The second subsection </h3>
<h1 class="chapter"> The second chapter</h1>
<h2 class="section"> The second chapter's first section</h2>
<h3 class="subsection"> The second chapter's first subsection </h3>Here is a fiddle to play with:
https://jsfiddle.net/muc0q9aw/
answered Mar 8 at 20:45
disinfordisinfor
3,16512031
You need to move the reset from the pseudo element. Also, you can reformat the counter-reset on the body to include all of them in one statement.
body
counter-reset: chapter section subsection;
h1.chapter::before
counter-increment: chapter;
content: "Chapter " counter(chapter) ": ";
h1.chapter
counter-reset: section;
h2.section::before
counter-increment: section;
content: "Section " counter(chapter) "." counter(section) ": ";
h2.section
counter-reset: subsection;
h3.subsection::before
counter-increment: subsection;
content: "Subsection " counter(chapter) "." counter(section) "." counter(subsection) ": ";
<h1 class="chapter"> The first chapter</h1>
<h2 class="section"> The first section </h2>
<h2 class="section"> The second section </h2>
<h3 class="subsection"> The first subsection </h3>
<h3 class="subsection"> The second subsection </h3>
<h1 class="chapter"> The second chapter</h1>
<h2 class="section"> The second chapter's first section</h2>
<h3 class="subsection"> The second chapter's first subsection </h3>Here is a fiddle to play with:
https://jsfiddle.net/muc0q9aw/
body
counter-reset: chapter section subsection;
h1.chapter::before
counter-increment: chapter;
content: "Chapter " counter(chapter) ": ";
h1.chapter
counter-reset: section;
h2.section::before
counter-increment: section;
content: "Section " counter(chapter) "." counter(section) ": ";
h2.section
counter-reset: subsection;
h3.subsection::before
counter-increment: subsection;
content: "Subsection " counter(chapter) "." counter(section) "." counter(subsection) ": ";
<h1 class="chapter"> The first chapter</h1>
<h2 class="section"> The first section </h2>
<h2 class="section"> The second section </h2>
<h3 class="subsection"> The first subsection </h3>
<h3 class="subsection"> The second subsection </h3>
<h1 class="chapter"> The second chapter</h1>
<h2 class="section"> The second chapter's first section</h2>
<h3 class="subsection"> The second chapter's first subsection </h3>body
counter-reset: chapter section subsection;
h1.chapter::before
counter-increment: chapter;
content: "Chapter " counter(chapter) ": ";
h1.chapter
counter-reset: section;
h2.section::before
counter-increment: section;
content: "Section " counter(chapter) "." counter(section) ": ";
h2.section
counter-reset: subsection;
h3.subsection::before
counter-increment: subsection;
content: "Subsection " counter(chapter) "." counter(section) "." counter(subsection) ": ";
<h1 class="chapter"> The first chapter</h1>
<h2 class="section"> The first section </h2>
<h2 class="section"> The second section </h2>
<h3 class="subsection"> The first subsection </h3>
<h3 class="subsection"> The second subsection </h3>
<h1 class="chapter"> The second chapter</h1>
<h2 class="section"> The second chapter's first section</h2>
<h3 class="subsection"> The second chapter's first subsection </h3>answered Mar 8 at 20:45
disinfordisinfor
3,16512031
answered Mar 8 at 20:45
disinfordisinfor
3,16512031
answered Mar 8 at 20:45
disinfordisinfor
3,16512031
answered Mar 8 at 20:45
disinfordisinfor
3,16512031
3,16512031
Thanks. I guess I need to learn more about 'pseudo-elements' now ;)
– Questioner
Mar 8 at 21:13
1
They're fun! The thing to keep in mind is the::beforeand::afterpseudo elements are like blank spaces that don't appear in the DOM but are attached to the element you add them to - so when you had thecounter-reseton the::beforepseudo, it had no connection to the following elements (h2,h3in your case). That's really a layman's basic explanation :)
– disinfor
Mar 8 at 21:23
add a comment |
Thanks. I guess I need to learn more about 'pseudo-elements' now ;)
– Questioner
Mar 8 at 21:13
1
They're fun! The thing to keep in mind is the::beforeand::afterpseudo elements are like blank spaces that don't appear in the DOM but are attached to the element you add them to - so when you had thecounter-reseton the::beforepseudo, it had no connection to the following elements (h2,h3in your case). That's really a layman's basic explanation :)
– disinfor
Mar 8 at 21:23
Thanks. I guess I need to learn more about 'pseudo-elements' now ;)
– Questioner
Mar 8 at 21:13
Thanks. I guess I need to learn more about 'pseudo-elements' now ;)
– Questioner
Mar 8 at 21:13
1
1
They're fun! The thing to keep in mind is the
::before and ::after pseudo elements are like blank spaces that don't appear in the DOM but are attached to the element you add them to - so when you had the counter-reset on the ::before pseudo, it had no connection to the following elements (h2, h3 in your case). That's really a layman's basic explanation :)– disinfor
Mar 8 at 21:23
They're fun! The thing to keep in mind is the
::before and ::after pseudo elements are like blank spaces that don't appear in the DOM but are attached to the element you add them to - so when you had the counter-reset on the ::before pseudo, it had no connection to the following elements (h2, h3 in your case). That's really a layman's basic explanation :)– disinfor
Mar 8 at 21:23
add a comment |
2
You have to use only one reset per element or you will simply override the first ones with the last one like with any properties.
You should also pay attention to where you need to use counter-reset:
Counters are "self-nesting", in the sense that resetting a counter in a descendant element or pseudo-element automatically creates a new instance of the counter.
Then
The scope of a counter starts at the first element in the document that has a 'counter-reset' for that counter and includes the element's descendants and its following siblings with their descendants ref
Considering this you shouldn't reset the counter inside a pseudo-element but the element itself so that the sibling elements will have the good value.
body
counter-reset: chapter section subsection;
h1.chapter
counter-reset: section subsection;
h1.chapter::before
counter-increment: chapter;
content: "Chapter " counter(chapter) ": ";
h2.section
counter-reset: subsection;
h2.section::before
counter-increment: section;
content: "Section " counter(chapter) "." counter(section) ": ";
h3.subsection::before
counter-increment: subsection;
content: "Subsection " counter(chapter) "." counter(section) "." counter(subsection) ": ";
<h1 class="chapter"> The first chapter</h1>
<h2 class="section"> The first section </h2>
<h2 class="section"> The second section </h2>
<h3 class="subsection"> The first subsection </h3>
<h3 class="subsection"> The second subsection </h3>
<h1 class="chapter"> The second chapter</h1>
<h2 class="section"> The second chapter's first section</h2>
<h3 class="subsection"> The second chapter's first subsection </h3>You can also simplify your code like below:
body
counter-reset: chapter; /*we reset the chapter once*/
h1.chapter
counter-reset: section; /*we reset the section each chapter*/
h1.chapter::before
counter-increment: chapter;
content: "Chapter " counter(chapter) ": ";
h2.section
counter-reset: subsection; /*we reset the subsection each section*/
h2.section::before
counter-increment: section;
content: "Section " counter(chapter) "." counter(section) ": ";
h3.subsection::before
counter-increment: subsection;
content: "Subsection " counter(chapter) "." counter(section) "." counter(subsection) ": ";
<h1 class="chapter"> The first chapter</h1>
<h2 class="section"> The first section </h2>
<h2 class="section"> The second section </h2>
<h3 class="subsection"> The first subsection </h3>
<h3 class="subsection"> The second subsection </h3>
<h1 class="chapter"> The second chapter</h1>
<h2 class="section"> The second chapter's first section</h2>
<h3 class="subsection"> The second chapter's first subsection </h3>answered Mar 8 at 20:42
Temani AfifTemani Afif
83.7k104795
How did I not see your answer when I was posting mine?! Oh well, take an upvote.
– disinfor
Mar 8 at 20:49
1
@disinfor I hit the submit too fast, so I had to delete for a short moment to edit then undelete ;)
– Temani Afif
Mar 8 at 20:51
add a comment |
2
You have to use only one reset per element or you will simply override the first ones with the last one like with any properties.
You should also pay attention to where you need to use counter-reset:
Counters are "self-nesting", in the sense that resetting a counter in a descendant element or pseudo-element automatically creates a new instance of the counter.
Then
The scope of a counter starts at the first element in the document that has a 'counter-reset' for that counter and includes the element's descendants and its following siblings with their descendants ref
Considering this you shouldn't reset the counter inside a pseudo-element but the element itself so that the sibling elements will have the good value.
body
counter-reset: chapter section subsection;
h1.chapter
counter-reset: section subsection;
h1.chapter::before
counter-increment: chapter;
content: "Chapter " counter(chapter) ": ";
h2.section
counter-reset: subsection;
h2.section::before
counter-increment: section;
content: "Section " counter(chapter) "." counter(section) ": ";
h3.subsection::before
counter-increment: subsection;
content: "Subsection " counter(chapter) "." counter(section) "." counter(subsection) ": ";
<h1 class="chapter"> The first chapter</h1>
<h2 class="section"> The first section </h2>
<h2 class="section"> The second section </h2>
<h3 class="subsection"> The first subsection </h3>
<h3 class="subsection"> The second subsection </h3>
<h1 class="chapter"> The second chapter</h1>
<h2 class="section"> The second chapter's first section</h2>
<h3 class="subsection"> The second chapter's first subsection </h3>You can also simplify your code like below:
body
counter-reset: chapter; /*we reset the chapter once*/
h1.chapter
counter-reset: section; /*we reset the section each chapter*/
h1.chapter::before
counter-increment: chapter;
content: "Chapter " counter(chapter) ": ";
h2.section
counter-reset: subsection; /*we reset the subsection each section*/
h2.section::before
counter-increment: section;
content: "Section " counter(chapter) "." counter(section) ": ";
h3.subsection::before
counter-increment: subsection;
content: "Subsection " counter(chapter) "." counter(section) "." counter(subsection) ": ";
<h1 class="chapter"> The first chapter</h1>
<h2 class="section"> The first section </h2>
<h2 class="section"> The second section </h2>
<h3 class="subsection"> The first subsection </h3>
<h3 class="subsection"> The second subsection </h3>
<h1 class="chapter"> The second chapter</h1>
<h2 class="section"> The second chapter's first section</h2>
<h3 class="subsection"> The second chapter's first subsection </h3>answered Mar 8 at 20:42
Temani AfifTemani Afif
83.7k104795
How did I not see your answer when I was posting mine?! Oh well, take an upvote.
– disinfor
Mar 8 at 20:49
1
@disinfor I hit the submit too fast, so I had to delete for a short moment to edit then undelete ;)
– Temani Afif
Mar 8 at 20:51
add a comment |
2
2
2
You have to use only one reset per element or you will simply override the first ones with the last one like with any properties.
You should also pay attention to where you need to use counter-reset:
Counters are "self-nesting", in the sense that resetting a counter in a descendant element or pseudo-element automatically creates a new instance of the counter.
Then
The scope of a counter starts at the first element in the document that has a 'counter-reset' for that counter and includes the element's descendants and its following siblings with their descendants ref
Considering this you shouldn't reset the counter inside a pseudo-element but the element itself so that the sibling elements will have the good value.
body
counter-reset: chapter section subsection;
h1.chapter
counter-reset: section subsection;
h1.chapter::before
counter-increment: chapter;
content: "Chapter " counter(chapter) ": ";
h2.section
counter-reset: subsection;
h2.section::before
counter-increment: section;
content: "Section " counter(chapter) "." counter(section) ": ";
h3.subsection::before
counter-increment: subsection;
content: "Subsection " counter(chapter) "." counter(section) "." counter(subsection) ": ";
<h1 class="chapter"> The first chapter</h1>
<h2 class="section"> The first section </h2>
<h2 class="section"> The second section </h2>
<h3 class="subsection"> The first subsection </h3>
<h3 class="subsection"> The second subsection </h3>
<h1 class="chapter"> The second chapter</h1>
<h2 class="section"> The second chapter's first section</h2>
<h3 class="subsection"> The second chapter's first subsection </h3>You can also simplify your code like below:
body
counter-reset: chapter; /*we reset the chapter once*/
h1.chapter
counter-reset: section; /*we reset the section each chapter*/
h1.chapter::before
counter-increment: chapter;
content: "Chapter " counter(chapter) ": ";
h2.section
counter-reset: subsection; /*we reset the subsection each section*/
h2.section::before
counter-increment: section;
content: "Section " counter(chapter) "." counter(section) ": ";
h3.subsection::before
counter-increment: subsection;
content: "Subsection " counter(chapter) "." counter(section) "." counter(subsection) ": ";
<h1 class="chapter"> The first chapter</h1>
<h2 class="section"> The first section </h2>
<h2 class="section"> The second section </h2>
<h3 class="subsection"> The first subsection </h3>
<h3 class="subsection"> The second subsection </h3>
<h1 class="chapter"> The second chapter</h1>
<h2 class="section"> The second chapter's first section</h2>
<h3 class="subsection"> The second chapter's first subsection </h3>answered Mar 8 at 20:42
Temani AfifTemani Afif
83.7k104795
You have to use only one reset per element or you will simply override the first ones with the last one like with any properties.
You should also pay attention to where you need to use counter-reset:
Counters are "self-nesting", in the sense that resetting a counter in a descendant element or pseudo-element automatically creates a new instance of the counter.
Then
The scope of a counter starts at the first element in the document that has a 'counter-reset' for that counter and includes the element's descendants and its following siblings with their descendants ref
Considering this you shouldn't reset the counter inside a pseudo-element but the element itself so that the sibling elements will have the good value.
body
counter-reset: chapter section subsection;
h1.chapter
counter-reset: section subsection;
h1.chapter::before
counter-increment: chapter;
content: "Chapter " counter(chapter) ": ";
h2.section
counter-reset: subsection;
h2.section::before
counter-increment: section;
content: "Section " counter(chapter) "." counter(section) ": ";
h3.subsection::before
counter-increment: subsection;
content: "Subsection " counter(chapter) "." counter(section) "." counter(subsection) ": ";
<h1 class="chapter"> The first chapter</h1>
<h2 class="section"> The first section </h2>
<h2 class="section"> The second section </h2>
<h3 class="subsection"> The first subsection </h3>
<h3 class="subsection"> The second subsection </h3>
<h1 class="chapter"> The second chapter</h1>
<h2 class="section"> The second chapter's first section</h2>
<h3 class="subsection"> The second chapter's first subsection </h3>You can also simplify your code like below:
body
counter-reset: chapter; /*we reset the chapter once*/
h1.chapter
counter-reset: section; /*we reset the section each chapter*/
h1.chapter::before
counter-increment: chapter;
content: "Chapter " counter(chapter) ": ";
h2.section
counter-reset: subsection; /*we reset the subsection each section*/
h2.section::before
counter-increment: section;
content: "Section " counter(chapter) "." counter(section) ": ";
h3.subsection::before
counter-increment: subsection;
content: "Subsection " counter(chapter) "." counter(section) "." counter(subsection) ": ";
<h1 class="chapter"> The first chapter</h1>
<h2 class="section"> The first section </h2>
<h2 class="section"> The second section </h2>
<h3 class="subsection"> The first subsection </h3>
<h3 class="subsection"> The second subsection </h3>
<h1 class="chapter"> The second chapter</h1>
<h2 class="section"> The second chapter's first section</h2>
<h3 class="subsection"> The second chapter's first subsection </h3>body
counter-reset: chapter section subsection;
h1.chapter
counter-reset: section subsection;
h1.chapter::before
counter-increment: chapter;
content: "Chapter " counter(chapter) ": ";
h2.section
counter-reset: subsection;
h2.section::before
counter-increment: section;
content: "Section " counter(chapter) "." counter(section) ": ";
h3.subsection::before
counter-increment: subsection;
content: "Subsection " counter(chapter) "." counter(section) "." counter(subsection) ": ";
<h1 class="chapter"> The first chapter</h1>
<h2 class="section"> The first section </h2>
<h2 class="section"> The second section </h2>
<h3 class="subsection"> The first subsection </h3>
<h3 class="subsection"> The second subsection </h3>
<h1 class="chapter"> The second chapter</h1>
<h2 class="section"> The second chapter's first section</h2>
<h3 class="subsection"> The second chapter's first subsection </h3>body
counter-reset: chapter section subsection;
h1.chapter
counter-reset: section subsection;
h1.chapter::before
counter-increment: chapter;
content: "Chapter " counter(chapter) ": ";
h2.section
counter-reset: subsection;
h2.section::before
counter-increment: section;
content: "Section " counter(chapter) "." counter(section) ": ";
h3.subsection::before
counter-increment: subsection;
content: "Subsection " counter(chapter) "." counter(section) "." counter(subsection) ": ";
<h1 class="chapter"> The first chapter</h1>
<h2 class="section"> The first section </h2>
<h2 class="section"> The second section </h2>
<h3 class="subsection"> The first subsection </h3>
<h3 class="subsection"> The second subsection </h3>
<h1 class="chapter"> The second chapter</h1>
<h2 class="section"> The second chapter's first section</h2>
<h3 class="subsection"> The second chapter's first subsection </h3>body
counter-reset: chapter; /*we reset the chapter once*/
h1.chapter
counter-reset: section; /*we reset the section each chapter*/
h1.chapter::before
counter-increment: chapter;
content: "Chapter " counter(chapter) ": ";
h2.section
counter-reset: subsection; /*we reset the subsection each section*/
h2.section::before
counter-increment: section;
content: "Section " counter(chapter) "." counter(section) ": ";
h3.subsection::before
counter-increment: subsection;
content: "Subsection " counter(chapter) "." counter(section) "." counter(subsection) ": ";
<h1 class="chapter"> The first chapter</h1>
<h2 class="section"> The first section </h2>
<h2 class="section"> The second section </h2>
<h3 class="subsection"> The first subsection </h3>
<h3 class="subsection"> The second subsection </h3>
<h1 class="chapter"> The second chapter</h1>
<h2 class="section"> The second chapter's first section</h2>
<h3 class="subsection"> The second chapter's first subsection </h3>body
counter-reset: chapter; /*we reset the chapter once*/
h1.chapter
counter-reset: section; /*we reset the section each chapter*/
h1.chapter::before
counter-increment: chapter;
content: "Chapter " counter(chapter) ": ";
h2.section
counter-reset: subsection; /*we reset the subsection each section*/
h2.section::before
counter-increment: section;
content: "Section " counter(chapter) "." counter(section) ": ";
h3.subsection::before
counter-increment: subsection;
content: "Subsection " counter(chapter) "." counter(section) "." counter(subsection) ": ";
<h1 class="chapter"> The first chapter</h1>
<h2 class="section"> The first section </h2>
<h2 class="section"> The second section </h2>
<h3 class="subsection"> The first subsection </h3>
<h3 class="subsection"> The second subsection </h3>
<h1 class="chapter"> The second chapter</h1>
<h2 class="section"> The second chapter's first section</h2>
<h3 class="subsection"> The second chapter's first subsection </h3>answered Mar 8 at 20:42
Temani AfifTemani Afif
83.7k104795
edited Mar 8 at 21:13
answered Mar 8 at 20:42
Temani AfifTemani Afif
83.7k104795
answered Mar 8 at 20:42
Temani AfifTemani Afif
83.7k104795
answered Mar 8 at 20:42
Temani AfifTemani Afif
83.7k104795
83.7k104795
How did I not see your answer when I was posting mine?! Oh well, take an upvote.
– disinfor
Mar 8 at 20:49
1
@disinfor I hit the submit too fast, so I had to delete for a short moment to edit then undelete ;)
– Temani Afif
Mar 8 at 20:51
add a comment |
How did I not see your answer when I was posting mine?! Oh well, take an upvote.
– disinfor
Mar 8 at 20:49
1
@disinfor I hit the submit too fast, so I had to delete for a short moment to edit then undelete ;)
– Temani Afif
Mar 8 at 20:51
How did I not see your answer when I was posting mine?! Oh well, take an upvote.
– disinfor
Mar 8 at 20:49
How did I not see your answer when I was posting mine?! Oh well, take an upvote.
– disinfor
Mar 8 at 20:49
1
1
@disinfor I hit the submit too fast, so I had to delete for a short moment to edit then undelete ;)
– Temani Afif
Mar 8 at 20:51
@disinfor I hit the submit too fast, so I had to delete for a short moment to edit then undelete ;)
– Temani Afif
Mar 8 at 20:51
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55070530%2fcounter-keeps-resetting-in-html-css%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
