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:
Using the plugin
Download the plugin and include it in your page using a
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="/jquery.js"></script> <script src="/jquery-extended-selectors.js"></script>
// 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");
jQuery Extended Selectors is free to use under the terms of the MIT license.