Question: I'm wondering how to use `RequireJS` with `JS` libraries like: *html5shiv* and *retina.js*, libraries like these don't need to be use the way we use jquery or something else. We just need to include it.

I'm currently using it an ugly way:

```
require(["html5shiv"], function () {
  //doing nothing here..
});

```

Any answers would be appreciated

Answer: 
The reason it works as intended in the second section (without the div's) but doesn't in the fist section is due to counter scope. According to the [W3C](http://www.w3.org/TR/CSS21/generate.html#scope):

> 
> 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.
> 
> 
> 

In the second half of the html, the `h3`s and `h4`s are siblings, therefore, the `counter-reset` defined on the `h3` applies to the following `h4` siblings. In the first part of the html, the `h4`s are not descendants nor siblings of the `h3`s, therefore, the counter-rest has no effect on them since they're out of scope.

The other thing is, if `counter-reset` is not defined in a given scope, it assumes a value of `0` each time you `counter-increment` or refer to the counter in a `content` rule, which explains why you're getting all `1`s in the first part of the html:

> 
> If 'counter-increment' or 'content' on an element or pseudo-element refers to a counter that is not in the scope of any 'counter-reset', implementations should behave as though a 'counter-reset' had reset the counter to 0 on that element or pseudo-element.
> 
> 
> 

If you have to wrap things in divs, I would:

1. Define a `counter-reset` for the `chapters` counter on `body`, so that it's not assumed 0 each time you use a `counter-increment`.
2. Either nest the `h4`s under their parent `h3`s (which is not cool) or make them siblings to ensure they're in the right scope.

**New HTML:**

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

```

**Addition to CSS:**

```
body {
    counter-reset: chapter;
}

```

<http://jsfiddle.net/myajouri/QpG9d/>
I have added class to the wrap to differentiate div.

**[Working Demo](http://jsfiddle.net/surjithctly/75MHS/23/)**

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) " ";
}

```