css counter

HTML

<!-- wrong counter -->
<div class="chapter">
<h3>dddd</h3>
<h4>dddd</h4>
<h4>dddd</h4>
</div>

<div>


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

</div>

<!-- correct counter -->
<!--
<h3>dddd</h3>
<h4>dddd</h4>
<h4>dddd</h4>
<h3>dddd</h3>
<h4>dddd</h4>
<h4>dddd</h4>
-->

CSS

body{
  counter-reset: chapter;
}
h3 {
  counter-increment: chapter;
}

.chapter{
    counter-reset: section;
}

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

h4 {
  counter-increment: section;
}

h4:before {
  content: counter(section) " ";
}