Skip to content

Latest commit

 

History

History
67 lines (58 loc) · 2.3 KB

README.md

File metadata and controls

67 lines (58 loc) · 2.3 KB
Raw

jquery.nthChild

jQuery nthChild is a simple Polyfill plugin to provide IE<9 support for nth Child CSS selectors.

Usage

Default Settings

$('.lt-ie9 .ie-nthchild').nthChild();

A data-reset data attribute can be used to set a zero-based reset index when cycling through large numbers of items or modifying behavior of the plugin.

HTML

This:

<ul class="grid-list ie-nthchild" data-reset="3">
    <li><img src="http://placehold.it/200x200" /></li>
    <li><img src="http://placehold.it/200x200" /></li>
    <li><img src="http://placehold.it/200x200" /></li>
    <li><img src="http://placehold.it/200x200" /></li>
    <li><img src="http://placehold.it/200x200" /></li>
    <li><img src="http://placehold.it/200x200" /></li>
    <li><img src="http://placehold.it/200x200" /></li>
    <li><img src="http://placehold.it/200x200" /></li>
    <li><img src="http://placehold.it/200x200" /></li>
</ul>

Will turn into this:

<ul class="grid-list ie-nthchild" data-reset="3">
    <li class="first"><img src="http://placehold.it/200x200" /></li>
    <li class="second"><img src="http://placehold.it/200x200" /></li>
    <li class="third"><img src="http://placehold.it/200x200" /></li>
    <li class="first"><img src="http://placehold.it/200x200" /></li>
    <li class="second"><img src="http://placehold.it/200x200" /></li>
    <li class="third"><img src="http://placehold.it/200x200" /></li>
    <li class="first"><img src="http://placehold.it/200x200" /></li>
    <li class="second"><img src="http://placehold.it/200x200" /></li>
    <li class="third"><img src="http://placehold.it/200x200" /></li>
</ul>

So you can do this in your CSS and have it work in IE 7 or 8:

.grid-list li:nth-child(3n+1) {
    margin-left: 0; // Style the first item differently
}
.lt-ie9 .grid-list li.first {
    margin-left: 0; // Style the first item differently
}

Custom Settings

You could use this plugin to add even/odd classes to elements for IE. Use along with data-reset="2".

$('.lt-ie9 .ie-even-odd').nthChild({
    cssClasses: ['even','odd']
});

Settings

  • cssClasses (Default: ['first','second','third','fourth','fifth','sixth','seventh','eighth','ninth','tenth','eleventh','twelfth']) : An array of string values to be used as your fallback CSS hooks.