CSS Counter-increment and counter-reset
Question
Please can someone explain to me why I am getting '1' even though reset is not applied to the subsection counter.I mean should I not get 1.1, 1.2 ,1.3 instead of 1.1, 1.1,1.1 for all h2 tag under the same h1 tag?I am a beginner in learning CSS and it would help me a lot if any one could explain.Thanks in advance. The code is:
<!DOCTYPE html>
<html>
<head>
<style>
body {
counter-reset: section;
}
h1 {
counter-reset: section;
}
h1:before {
counter-increment: section;
content: "Section " counter(section) ". ";
}
h2:before {
counter-increment: subsection;
content: counter(section) "." counter(subsection) " ";
}
</style>
</head>
<body>
<p><b>Note:</b> IE8 supports these properties only if a !DOCTYPE is specified.</p>
<h1>HTML tutorials</h1>
<h2>HTML Tutorial</h2>
<h2>XHTML Tutorial</h2>
<h2>CSS Tutorial</h2>
<h1>Scripting tutorials</h1>
<h2>JavaScript</h2>
<h2>VBScript</h2>
<h1>XML tutorials</h1>
<h2>XML</h2>
<h2>XSL</h2>
</body>
</html>
Output:
2 answers
solution1
0 2016-04-10 18:04:26
Please try this:
Instead of
h1 {
counter-reset: section;
}
It will be
h1 {
counter-reset: subsection;
}
solution2
0 2016-04-10 18:14:34
See this very good article on counter-reset property.
https://css-tricks.com/almanac/properties/c/counter-reset/
As it said, h1 element is used to reset h2 counter-increment when a new h1 occurs in the code.
Example :
<h1>HTML tutorials</h1> // count 1
<h2>HTML Tutorial</h2> // count 1.1 because you have one h1 above
<h2>XHTML Tutorial</h2> // count 1.2
<h2>CSS Tutorial</h2> // count 1.3
<h1>Scripting tutorials</h1> // count 2 because of the new h1 tag
<h2>JavaScript</h2> // count 2.1 because of the reset after the new h1 appears
<h2>VBScript</h2> // count 2.2
So you have to use this code to make the reset works properly on h2:before counter :
h1 {
counter-reset: subsection // which is the name of h2 counter-increment;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.