Updated 14-Jul-2007: For jQuery 1.1.3.1. Added more such as :color() etc and upgraded the code. Updated 03-Oct-2006: Added "nth-child-of-type(n)" - Useful for finding all TD elements in the same column. Updated 02-Oct-2006: Added ":Contains()" as a case insensitive version of :contains(). Also "nth-of-type()" etc. Updated 28-Sep-2006: Added ":blur" to find element that last had focus. Updated 27-Sep-2006: Added ":selected" and "nth-last-child()", improved ":modified", reduced code size.
Tested on IE 7, FF 2.0, Opera 9.22, WinSafari 3.0.2 (Known issue: The :color and :bg-color selectors fail on WinSafari)
:color(c) - Match elements with color c. Any of the main css colour formats will match equally well: #rrggbb, rgb(r,g,b) or a named colour, eg :color(blue) will match elements who's color is set to blue or #0000ff or rgb(0,0,255). Does not yet handle: rgb percentages such as rgb(10%,50%,100%); rgba() codes; short hex codes such as #00f; hsl() codes; hsla() codes.
:bg-color(c) - Match elements with background-color c. (See the :color() selector for accepted c formats).
:colIndex(i) - Match TD or TH cells in column i. (First column is zero). Allows for preceeding cells with colSpan greater than one.
Form attributes:
:modified - Find form elements who's value or checked attribute has changed (since page loaded). Applies to <INPUT>, <TEXTAREA> or <SELECT> only. Eg: $("FORM/INPUT:modified"). This is my favourite. Really useful for tracking which fields the user has changed.
:focus - Find the element that has the focus. Eg: $("INPUT:focus")
:blur - Find the element that last had the focus (eg before submit was clicked). Eg: $("INPUT:blur")
:hover - Find the element under the mouse. Eg: $("DIV:hover")
:Contains() - A case insensitive version of jQuery's own :contains() selector
:text(t) - Match <INPUT TEXT> <TEXTAREA> elements that contain specified text t. The standard :text selector remains unaffected.
Form elements:
:multiple - Match <SELECT multiple> elements. Eg: $("#myForm/*:multple") is equivalent to $("FORM/SELECT[@multiple]")
:selected - Match <SELECT> elements with 1 or more selections, or <OPTION> elements that are selected. Eg: $("#myForm/SELECT:selected") , $("#myList/OPTION:selected")
:unchecked - Match RADIO and CHECKBOX elements that are not checked.
:option - Match <OPTION>, RADIO and CHECKBOX elements. Eg: $("#myForm/*:option")
:option-sel - Match <OPTION>, RADIO and CHECKBOX elements that are selected or checked. Eg: $("#myList/*:option-sel")
:option-def - Match <OPTION>, RADIO and CHECKBOX elements that were selected originally (by default) before user changed them. Eg: $("#myList/*:option-def")
:option-mod - Match <OPTION>, RADIO and CHECKBOX elements who's selection or checked status has changed (since page loaded). Eg: $("#myList/*:option-mod")
:only-child-of-type:nth-child-of-type(n):first-child-of-type:last-child-of-type - Match n-th child of their type in their parent. Most useful when handling elements who's element-name is not known to you.
:only-of-type:nth-of-type(n):first-of type:last-of-type - Match elements that are the nth element of their type in the current jQuery set. Most useful when handling elements who's element-name is not known to you.
Position checks:
:parents(s) - Match elements that have parents matching simple selector s.
:siblings(s) - Match elements that have siblings matching simple selector s.
Please send feedback/comments to george.jquery (at) softwareunity.com
(I may not be able to offer direct help or support though, sorry!)
Known issues:
:focus and :blur will not work on any elements created after the page loaded (except :focus in IE)
:focus and :blur rely on custom blur and focus event handlers added to all form elements during page load (except in IE). This may cause a slight delay when loading very large forms
:focus and :blur so far only works with Form elements. Other elements that could receive focus (such as when their tabIndex is set) are ignored.
:blur in Opera 9.01: moving focus to a <button> element causes :blur to return the button element instead of the previous element. Works fine if you use <input type=text> though. Weird.
:hover relies on a custom mousemove event handler to track which element the mouse is over. It would be lighter on the cpu if we used mouseover but the event.target/srcElement were not as reliable in some situations, especially when combined with other custom mouseover events.
:nth-of-type - I've not found a use for it yet!
Ideas / To do:
Clicking submit or reset should perhaps reset the form elements to unmodified so that :modified thinks the form is unchanged again.
Axis selectors such as ancestor:: and next:: would be nice. I know JQuery offers perfectly good .parents() and .next() methods etc but there are times when it would be handy in the query itself. The trouble is I've not figured out how they'd work in JQuery. Axis:: selectors are different from the other :selectors because they don't just filter the results, they actually return different elements. Does anyone know how they might be achieved?