a plugin to add missing CSS3 pseudo-class selectors

What does it do?

This plugin extends jQuery's selector support to include the missing CSS3 *-of-type pseudo-class selectors. Originally, this plugin was created to service the needs of web developers and designers wanting to use selectivizr with jQuery, but it can be useful in any project using jQuery. The plugin adds support for the following selectors:

• :first-of-type
• :last-of-type
• :only-of-type
• :nth-of-type
• :nth-last-of-type

Using the plugin

Download the plugin and include it in your page using a <script> tag as shown below. Make sure you add the plugin after the main jQuery script. Once included, you'll be able to use the selectors listed above in your jQuery statements.

<script src="{path}/jquery.js"></script>
<script src="{path}/jquery-extended-selectors.js"></script>

Some examples

// stripe odd table rows
$("tr:nth-of-type(odd)").css("background", "red");
$("tr:nth-of-type(even)").css("background", "green");

// alternate image floats
$("img:nth-of-type(2n)").css("float", "left");
$("img:nth-of-type(2n+1)").css("float", "right");

// increase font size of first paragraph
$("p:first-of-type").css("font-size", "32px");

// decrease font size of last paragraph if has class of 'legal'
$("p.legal:last-of-type").css("font-size", "75%");

// add a border to an image if there are no other sibling images
$("img:only-of-type").css("border", "2px solid green");

Contribute

You can fork the jQuery Extended Selectors plugin source from it's github repo, where you can also file bugs and feature requests.

License

jQuery Extended Selectors is free to use under the terms of the MIT license.