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.
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 "error". 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[foo~=bar]
- Get any
DIV
element where thefoo
attribute is a list of space-separated values, one of which is exactly equal to "bar". div[lang|=en]
- Get any
DIV
element where thelang
attribute has a hyphen-separated list of values beginning (from the left) with "en". 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: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(5n+3)
- Get every 5th
DIV
child element of its parent element, starting at 3, then 8, 13, 18 etc. tr:nth-last-of-type(-n+3)
- Get the last three rows of any tables.
td:nth-last-child(n+1)
- Get all but the last column of any tables.
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. div:lang(zh)
- Get any
DIV
element which is in Chinese. p:target
- Get the
P
element which is the target of the referring URL. p, a
- Get all
P
elements and allA
elements.