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 anyDIV
element. div > p
- Get all
P
elements which are direct descendants of anyDIV
element. div + p
- Get all
P
elements where their immediate previous sibling element is aDIV
element. div ~ p
- Get all
P
elements which are following siblings to aDIV
element (not necessarily immediate siblings). div[id]
- Get any
DIV
element which has anID
attribute. div[id=container]
- Get any
DIV
element which has anID
attribute with the value of "container". input[type=text][value=Yes]
- Get any
INPUT
element which has aTYPE
attribute with the value of "text" and aVALUE
attribute which is ="Yes". div[id^=empt]
- Get any
DIV
element where theID
attribute value begins with "empt". div[id$=parent]
- Get any
DIV
element where theID
attribute value ends with "parent". div[id*=mpt]
- Get any
DIV
element where theID
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 firstP
element child of aDIV
element with anID
attribute with the value "container". p:last-of-type
- Get the
P
element which is the lastP
element child of its parent element. p:only-of-type
- Get any
P
element which is the onlyP
element child of its parent element. p:nth-of-type(7)
- Get the
P
element which is the 7thP
element child of its parent element. div#container p:nth-last-of-type(2)
- Get the
P
element which is the lastP
element child of its parent element -2, e.g. the thirdP
element if the parent element has 5P
element children. div:empty
- Get any
DIV
element which is completely empty (including text nodes). div:not([id=container]
- Get any
DIV
element where itsID
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 allA
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 itsCLASS
attribute is a list of space-separated values, and one of them is "org". div[lang|=en]
- Get any
DIV
element where itsLANG
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.
CSS selectors
DOMAssistant modules
- DOMAssistant Core
- DOMAssistant.AJAX
- DOMAssistant.Content
- DOMAssistant.CSS
- DOMAssistant.Events
- DOMAssistant.Load
CSS selectors
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.