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

```
The reason is that “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.” (CSS 2.1, 12.4.1 [Nested counters and scope](http://www.w3.org/TR/CSS2/generate.html#propdef-counter-reset)).

So in the “wrong counter” case, each `div` element containing an `h3` element has its own counter named `chapter`, and each `h3` increments such a local counter.

If you need `div` elements (or `section` elements) for grouping, you can use them this way:

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

```

And with such a structure, your CSS would have `.chapter` instead of `h3`:

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

```