Category: Selectors

Borrowing from CSS 1–3, and then adding its own, jQuery offers a powerful set of tools for matching a set of elements in a document.

To use any of the meta-characters ( such as !"#$%&'()*+,./:;<=>?@[\]^`{|}~ ) as a literal part of a name, it must be escaped with with two backslashes: \\. For example, an element with id="foo.bar", can use the selector $("#foo\\.bar"). The W3C CSS specification contains the complete set of rules regarding valid CSS selectors. Also useful is the blog entry by Mathias Bynens on CSS character escape sequences for identifiers.

All Selector (“*”)

Selects all elements.

:animated Selector

Select all elements that are in the progress of an animation at the time the selector is run.

Attribute Contains Prefix Selector [name|=”value”]

Selects elements that have the specified attribute with a value either equal to a given string or starting with that string followed by a hyphen (-).

Attribute Contains Selector [name*=”value”]

Selects elements that have the specified attribute with a value containing a given substring.

Attribute Contains Word Selector [name~=”value”]

Selects elements that have the specified attribute with a value containing a given word, delimited by spaces.

Attribute Ends With Selector [name$=”value”]

Selects elements that have the specified attribute with a value ending exactly with a given string. The comparison is case sensitive.

Attribute Equals Selector [name=”value”]

Selects elements that have the specified attribute with a value exactly equal to a certain value.

Attribute Not Equal Selector [name!=”value”]

Select elements that either don’t have the specified attribute, or do have the specified attribute but not with a certain value.

Attribute Starts With Selector [name^=”value”]

Selects elements that have the specified attribute with a value beginning exactly with a given string.

:button Selector

Selects all button elements and elements of type button.

:checkbox Selector

Selects all elements of type checkbox.

:checked Selector

Matches all elements that are checked or selected.

Child Selector (“parent > child”)

Selects all direct child elements specified by “child” of elements specified by “parent”.

Class Selector (“.class”)

Selects all elements with the given class.

:contains() Selector

Select all elements that contain the specified text.

Descendant Selector (“ancestor descendant”)

Selects all elements that are descendants of a given ancestor.

:disabled Selector

Selects all elements that are disabled.

Element Selector (“element”)

Selects all elements with the given tag name.

:empty Selector

Select all elements that have no children (including text nodes).

:enabled Selector

Selects all elements that are enabled.

:eq() Selector

Select the element at index n within the matched set.

:even Selector

Selects even elements, zero-indexed. See also :odd.

:file Selector

Selects all elements of type file.

:first-child Selector

Selects all elements that are the first child of their parent.

:first-of-type Selector

Selects all elements that are the first among siblings of the same element name.

:first Selector

Selects the first matched DOM element.

:focus Selector

Selects element if it is currently focused.

:gt() Selector

Select all elements at an index greater than index within the matched set.

Has Attribute Selector [name]

Selects elements that have the specified attribute, with any value.

:has() Selector

Selects elements which contain at least one element that matches the specified selector.

:header Selector

Selects all elements that are headers, like h1, h2, h3 and so on.

:hidden Selector

Selects all elements that are hidden.

ID Selector (“#id”)

Selects a single element with the given id attribute.

:image Selector

Selects all elements of type image.

:input Selector

Selects all input, textarea, select and button elements.

:lang() Selector

Selects all elements of the specified language.

:last-child Selector

Selects all elements that are the last child of their parent.

:last-of-type Selector

Selects all elements that are the last among siblings of the same element name.

:last Selector

Selects the last matched element.

:lt() Selector

Select all elements at an index less than index within the matched set.

Multiple Attribute Selector [name=”value”][name2=”value2″]

Matches elements that match all of the specified attribute filters.

Multiple Selector (“selector1, selector2, selectorN”)

Selects the combined results of all the specified selectors.

Next Adjacent Selector (“prev + next”)

Selects all next elements matching “next” that are immediately preceded by a sibling “prev”.

Next Siblings Selector (“prev ~ siblings”)

Selects all sibling elements that follow after the “prev” element, have the same parent, and match the filtering “siblings” selector.

:not() Selector

Selects all elements that do not match the given selector.

:nth-child() Selector

Selects all elements that are the nth-child of their parent.

:nth-last-child() Selector

Selects all elements that are the nth-child of their parent, counting from the last element to the first.

:nth-last-of-type() Selector

Selects all the elements that are the nth-child of their parent in relation to siblings with the same element name, counting from the last element to the first.