Supported CSS Selectors
(CSS 1, CSS 2, CSS 3)

With the DOMAssistant Core module and its $ method comes support for using CSS selectors to get a reference to one or multiple elements. There is support for any major CSS element selector in CSS 1, CSS 2 and CSS 3, with the exact same syntax as you would use in a CSS file.

Note: if you pass in just a string with no spaces or special characters, e.g. $("div"), it will not interpret as if you want all the elements of that certain tag. Instead it defaults to looking for elements with that specific id. Although a fairly uncommon request to get all elements of a certain tag in the entire document, if you want that, write $(document).elmsByTag("div") instead.

For an in-depth explanation of the CSS selectors and examples of how us them, please read CSS 2.1 selectors and CSS 3 selectors explained.

Implemented CSS selectors

#container
Get an element with the id "container".
.item
Get all elements with the class name "item".
#container.item
Get an element with the id "container", if it also has the class name "item".
p.info.error
Get all P elements with both a class name consisting of both "info" and "item".
div p
Get all P elements which are descendants of any DIV element.
div > p
Get all P elements which are direct descendants of any DIV element.
div + p
Get all P elements where their immediate previous sibling element is a DIV element.
div ~ p
Get all P elements which are following siblings to a DIV element (not necessarily immediate siblings).
div[id]
Get any DIV element which has an ID attribute.
div[id=container]
Get any DIV element which has an ID attribute with the value of "container".
input[type=text][value=Yes]
Get any INPUT element which has a TYPE attribute with the value of "text" and a VALUE attribute which is ="Yes".
div[id^=empt]
Get any DIV element where the ID attribute value begins with "empt".
div[id$=parent]
Get any DIV element where the ID attribute value ends with "parent".
div[id*=mpt]
Get any DIV element where the ID attribute value contains the text "mpt".
div:first-child
Get any DIV element which is the first child of its parent element.
div:last-child
Get any DIV element which is the last child of its parent.
div:only-child
Get any DIV element which is the only child of its parent.
div#container p:first-of-type
Get the P element which is the first P element child of a DIV element with an ID attribute with the value "container".
p:last-of-type
Get the P element which is the last P element child of its parent element.
p:only-of-type
Get any P element which is the only P element child of its parent element.
p:nth-of-type(7)
Get the P element which is the 7th P element child of its parent element.
div#container p:nth-last-of-type(2)
Get the P element which is the last P element child of its parent element -2, e.g. the third P element if the parent element has 5 P element children.
div:empty
Get any DIV element which is completely empty (including text nodes).
div:not([id=container]
Get any DIV element where its ID attribute is not "container".
div:nth-child(3)
Get any DIV element which is the third child element of its parent element.
div:nth-child(odd)
Get every odd DIV child element of its parent element.
div:nth-child(even)
Get every even DIV child element of its parent element.
div:nth-child(n5+3)
Get every 5th DIV child element of its parent element, starting at 3, then 8, 13, 18 etc.
input:enabled
Get any INPUT element which is enabled.
input:disabled
Get any INPUT element which is disabled.
input:checked
Get any INPUT element which is checked.
p, a
Get all P elements and all A elements.

Non-supported CSS selectors

These CSS selectors aren't supported, plainly because there doesn't seem to be any demand form them in real life. Also note that any selector not matching a DOM element is not supported.

div[class~=org]
Get any DIV element where its CLASS attribute is a list of space-separated values, and one of them is "org".
div[lang|=en]
Get any DIV element where its LANG attribute is a list of hyphen-separated values, and it begins with "en".
E:root
Gets the root element of the document. In an HTML document this is the HTML element.

Download DOMAssistant

All modules in one file

DOMAssistant 2.5.7, compressed
(22kb, 7kb Gzipped)
Intended for production usage.
DOMAssistant 2.5.7, complete
(43kb)
Intended for learning and development usage.

Individual modules

Get your copy