Geek Answers Handbook

Invalid numbering with css counters

Why does the following css not get the correct partition numbering ( http://jsfiddle.net/75MHS/ )? When I place h3and h4in divs, all the chapter numbers and section numbers are always alone. But when I delete the containers div, all numbers are correct.

<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
h3 {
  counter-increment: chapter;
  counter-reset: section;
}
h3:before {
  content: "Chapter " counter(chapter) " ";
}
h4 {
  counter-increment: section;
}
h4:before {
  content: counter(section) " ";
}
</style>
</head>
<body>
<!-- wrong counter -->
<div><h3>dddd</h3></div>
<div><h4>dddd</h4></div>
<div><h4>dddd</h4></div>
<div><h3>dddd</h3></div>
<div><h4>dddd</h4></div>
<div><h4>dddd</h4></div>

<!-- correct counter -->
<!--
<h3>dddd</h3>
<h4>dddd</h4>
<h4>dddd</h4>
<h3>dddd</h3>
<h4>dddd</h4>
<h4>dddd</h4>
-->
</body>
</html>
+4
source share
4 answers

The reason it works, as expected in the second section (without a div), but not in the first section, is caused by a counter. According to W3C :

, "counter- reset" .

html h3 h4 , counter-reset, h3, h4 . html h4 h3 s, , .

, counter-reset , 0 , counter-increment content, , ' 1 html:

"counter-increment" "content" , "counter- reset", , "counter- reset ' reset 0 .


div, :

  • counter-reset chapters body, 0 , counter-increment.

  • h4 h3 ( ), , , .


HTML:

<div>
    <h3>dddd</h3>
    <h4>dddd</h4>
    <h4>dddd</h4>
</div>
<div>
    <h3>dddd</h3>
    <h4>dddd</h4>
    <h4>dddd</h4>
</div>

CSS:

body {
    counter-reset: chapter;
}

http://jsfiddle.net/myajouri/QpG9d/

+2

, divs DOM, , .

div {
    counter-increment: chapter;
    counter-reset: section;
}
div:before {
    content: "Chapter " counter(chapter) " ";
}
+1

div.

HTML

<div class="head"><h3>dddd</h3></div>
<div class="sub"><h4>dddd</h4></div>
<div class="sub"><h4>dddd</h4></div>
<div class="head"><h3>dddd</h3></div>
<div class="sub"><h4>dddd</h4></div>
<div class="sub"><h4>dddd</h4></div>

CSS

div.head {
  counter-increment: chapter;
  counter-reset: section;
}

div.head h3:before {
  content: "Chapter " counter(chapter) " ";
}

div.sub {
  counter-increment: section;
}

div.sub h4:before {
  content: counter(section) " ";
}
+1

, "" "", , - ". (CSS 2.1, 12.4.1 ).

, " " div, h3, chapter, h3 .

div ( section) , :

<div class=chapter>
<h3>dddd</h3>
<h4>dddd</h4>
<h4>dddd</h4>
</div>
<div class=chapter>
<h3>dddd</h3>
<h4>dddd</h4>
<h4>dddd</h4>
</div>

CSS .chapter h3:

.chapter {
  counter-increment: chapter;
  counter-reset: section;
}
-1

More articles:


All Articles