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.