2 ==========================
4 Slick is the selector engine used by MooTools. It supports many CSS3 selectors and more!
8 - [W3C Pseudo Classes](http://www.w3.org/TR/2005/WD-css3-selectors-20051215/#pseudo-classes)
14 Reverse Combinators redirect the flow of selectors and combinators. Slick implements these by prepending `!` to a selector or combinator.
18 document.getElement('p ! div') // A <div> that is an ancestor of a <p>
19 document.getElement('p !> div') // A <div> that is a direct parent of a <p>
20 document.getElement('.foo !+ p') // Gets the previous adjacent <p> sibling
24 Reverse Combinators are used internally by MooTools for many of our traversal methods. They offer an extremely concise and powerful alternative to traversal methods like `getParent()`.
27 Function: Slick.definePseudo {#Slick:Slick-definePseudo}
28 ---------------------------------------------------------
30 definePseudo allows you to create your own custom pseudo selectors.
34 Slick.definePseudo('display', function(value){
35 return Element.getStyle(this, 'display') == value;
38 <div style="display: none">foo</div>
39 <div style="display: block">bar</div>
41 $$(':display(block)'); // Will return the block element
43 Slick.definePseudo('my-custom-pseudo', function(){
44 // 'this' is the node to check
45 return Element.retrieve(this, 'something-custom').isAwesome;
48 $$(':my-custom-pseudo') // Will return the first <p> tag that is awesome
51 Selector: Next Siblings ('~') {#Slick:nextSiblings}
52 ---------------------------------------------------
54 Gets the next siblings.
58 $$('p.foo ~') // Gets all next siblings of <p class="foo">
59 $$('p.foo ~ blockquote') // Gets every <blockquote> with a <p class="foo"> sibling somewhere *before* it
62 Selector: Previous Siblings ('!~') {#Slick:previouSiblings}
63 ------------------------------------------------------------
65 Gets the previous siblings.
69 $$('p.foo !~') // Gets all previous siblings of <p class="foo">
70 $$('p.foo !~ blockquote') // Gets every <blockquote> with a <p class="foo"> sibling somewhere *after* it
73 Selector: All Siblings ('~~') {#Slick:allSiblings}
74 --------------------------------------------------
80 $$('p.foo ~~') // Gets all previous and next siblings of <p class="foo">
81 $$('p.foo ~~ blockquote') // Gets every <blockquote> with a <p class="foo"> sibling before OR after it
83 Selector: First Child ('^') {#Slick:firstChild}
84 -----------------------------------------------
86 Gets the first child of an element.
90 $$('p.foo ^') // Gets the first child of <p class="foo">
91 $$('p.foo ^ strong') // Gets every <strong> that is the first element child of a <p class="foo">
94 Selector: Last Child ('!^') {#Slick:lastChild}
95 ----------------------------------------------
97 Gets the last child of an element.
101 $$('p.foo !^') // Gets the last child of <p class="foo">
102 $$('p.foo !^ strong') // Gets every <strong> that is the last element child of a <p class="foo">
106 Selector: checked {#Slick:checked}
107 ----------------------------------
109 Matches all Elements that are checked.
115 $('myForm').getElements('input:checked');
118 Selector: enabled {#Slick:enabled}
119 ----------------------------------
121 Matches all Elements that are enabled.
127 $('myElement').getElements(':enabled');
130 Selector: empty {#Slick:empty}
131 ------------------------------
133 Matches all elements which are empty.
140 Selector: contains {#Slick:contains}
141 ------------------------------------
143 Matches all the Elements which contains the text.
147 * text - (string) The text that the Element should contain.
151 $$('p:contains("find me")');
154 Selector: focus {#Slick:focus}
155 ------------------------------
157 Gets the element in focus.
161 $$(':focus'); // Gets the element in focus
164 Selector: not {#Slick:not}
165 --------------------------
167 Matches all elements that do not match the selector.
169 <small>Note: The Slick implementation of the `:not` pseudoClass is a superset of the standard. i.e. it is more advanced than the specification.</small>
173 $$(':not(div.foo)'); // all elements except divs with class 'foo'
175 $$('input:not([type="submit"])'); // all inputs except submit buttons
177 myElement.getElements(':not(a)');
182 Selector: nth-child {#Slick:nth-child}
183 --------------------------------------
185 Matches every nth child.
191 ':nth-child(nExpression)'
195 * nExpression - (string) A nth expression for the "every" nth-child.
199 <span id="i1"></span>
200 <span id="i2"></span>
201 <span id="i3"></span>
202 <span id="i4"></span>
203 <span id="i5"></span>
205 $$(':nth-child(1)'); //Returns Element #i1.
207 $$(':nth-child(2n)'); //Returns Elements #i2 and #i4.
209 $$(':nth-child(2n+1)') //Returns Elements #i1, #i3 and #i5.
211 $$(':nth-child(3n+2)') //Returns Elements #i2 and #i5.
214 Every Odd Child (same as 2n+1):
218 Every Even Child (same as 2n):
224 This selector respects the w3c specifications, so it has 1 as its first index, not 0. Therefore nth-child(odd) will actually select the even children, if you think in zero-based indexes.
227 Selector: nth-last-child {#Slick:nth-last-child}
228 --------------------------------------
230 Matches every nth child, starting from the last child.
236 ':nth-last-child(nExpression)'
240 * nExpression - (string) A nth expression for the "every" nth-child.
244 <span id="i1"></span>
245 <span id="i2"></span>
246 <span id="i3"></span>
247 <span id="i4"></span>
248 <span id="i5"></span>
250 $$(':nth-last-child(1)'); //Returns Element #i5.
252 $$(':nth-last-child(2n)'); //Returns Elements #i2 and #i4.
254 $$(':nth-last-child(2n+1)') //Returns Elements #i1, #i3 and #i5.
256 $$(':nth-last-child(3n+2)') //Returns Elements #i1 and #i4.
258 Every Odd Child (same as 2n+1):
260 ':nth-last-child(odd)'
262 Every Even Child (same as 2n):
264 ':nth-last-child(even)'
268 This selector respects the w3c specifications, so it has 1 as its first index, not 0. Therefore nth-last-child(odd) will actually select the even last-children, if you think in zero-based indexes.
271 Selector: even {#Slick:even}
272 ----------------------------
274 Matches every even child.
282 This selector is not part of the w3c specification, therefore its index starts at 0. This selector is highly recommended over nth-child(even), as this will return the real even children.
285 Selector: odd {#Slick:odd}
286 --------------------------
288 Matches every odd child.
296 This selector is not part of the w3c specification, therefore its index starts at 0. This selector is highly recommended over nth-child(odd), as this will return the real odd children.
299 Selector: index {#Slick:index}
300 ------------------------------
302 Matches the node at the specified index
306 $$('p:index(2)'); // Gets the third <p> tag.
310 This is zero-indexed.
313 Selector: first-child {#Slick:first-child}
314 ------------------------------------------
316 Matches the first child.
324 $$('td:first-child');
327 Selector: last-child {#Slick:last-child}
328 ----------------------------------------
330 Matches the last child.
341 Selector: only-child {#Slick:only-child}
342 ----------------------------------------
344 Matches an only child of its parent Element.
356 [Slick]: /core/Slick/Slick