Slick

Slick is the selector engine used by MooTools. It supports many CSS3 selectors and more!

Смотрите также:

• W3C Pseudo Classes

Reverse Combinators

Reverse Combinators redirect the flow of selectors and combinators. Slick implements these by prepending ! to a selector or combinator.

Examples:

document.getElement('p ! div')    // A <div> that is an ancestor of a <p>
document.getElement('p !> div')   // A <div> that is a direct parent of a <p>
document.getElement('.foo !+ p')  // Gets the previous adjacent <p> sibling

Notes:

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().

Function: Slick.definePseudo

definePseudo allows you to create your own custom pseudo selectors.

Examples:

Slick.definePseudo('display', function(value){
    return Element.getStyle(this, 'display') == value;
});
 
<div style="display: none">foo</div>
<div style="display: block">bar</div>
 
$$(':display(block)');      // Will return the block element
 
Slick.definePseudo('my-custom-pseudo', function(){
    // 'this' is the node to check
    return Element.retrieve(this, 'something-custom').isAwesome;
});
 
$$(':my-custom-pseudo')     // Will return the first <p> tag that is awesome

Selector: Next Siblings ('~')

Gets the next siblings.

Пример:

$$('p.foo ~')        // Gets all next siblings of <p class="foo">
$$('p.foo ~ blockquote') // Gets every <blockquote> with a <p class="foo"> sibling somewhere *before* it

Selector: Previous Siblings ('!~')

Gets the previous siblings.

Пример:

$$('p.foo !~')            // Gets all previous siblings of <p class="foo">
$$('p.foo !~ blockquote') // Gets every <blockquote> with a <p class="foo"> sibling somewhere *after* it

Selector: All Siblings ('~~')

Gets all siblings.

Пример:

$$('p.foo ~~')            // Gets all previous and next siblings of <p class="foo">
$$('p.foo ~~ blockquote') // Gets every <blockquote> with a <p class="foo"> sibling before OR after it

Selector: First Child ('^')

Gets the first child of an element.

Пример:

$$('p.foo ^')       // Gets the first child of <p class="foo">
$$('p.foo ^ strong')    // Gets every <strong> that is the first element child of a <p class="foo">

Selector: Last Child ('!^')

Gets the last child of an element.

Пример:

$$('p.foo !^')      // Gets the last child of <p class="foo">
$$('p.foo !^ strong')   // Gets every <strong> that is the last element child of a <p class="foo">

Selector: checked

Matches all Elements that are checked.

Examples:

$$(':checked')
 
$('myForm').getElements('input:checked');

Selector: enabled

Matches all Elements that are enabled.

Examples:

$$(':enabled')
 
$('myElement').getElements(':enabled');

Selector: empty

Matches all elements which are empty.

Пример:

$$(':empty');

Selector: contains

Matches all the Elements which contains the text.

Variables:

• text - (string) The text that the Element should contain.

Пример:

$$('p:contains("find me")');

Selector: focus

Gets the element in focus.

Пример:

$$(':focus');       // Gets the element in focus

Selector: not

Matches all elements that do not match the selector.

Note: The Slick implementation of the :not pseudoClass is a superset of the standard. i.e. it is more advanced than the specification.

Examples:

$$(':not(div.foo)'); // all elements except divs with class 'foo'
 
$$('input:not([type="submit"])'); // all inputs except submit buttons
 
myElement.getElements(':not(a)');
 
$$(':not(ul li)');

Selector: nth-child

Matches every nth child.

Usage:

Nth Expression:

':nth-child(nExpression)'

Variables:

• nExpression - (string) A nth expression for the "every" nth-child.

Examples:

<span id="i1"></span>
<span id="i2"></span>
<span id="i3"></span>
<span id="i4"></span>
<span id="i5"></span>
 
$$(':nth-child(1)'); //Returns Element #i1.
 
$$(':nth-child(2n)'); //Returns Elements #i2 and #i4.
 
$$(':nth-child(2n+1)') //Returns Elements #i1, #i3 and #i5.
 
$$(':nth-child(3n+2)') //Returns Elements #i2 and #i5.

Every Odd Child (same as 2n+1):

':nth-child(odd)'

Every Even Child (same as 2n):

':nth-child(even)'

Note:

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.

Selector: nth-last-child

Matches every nth child, starting from the last child.

Usage:

Nth Expression:

':nth-last-child(nExpression)'

Variables:

• nExpression - (string) A nth expression for the "every" nth-child.

Examples:

<span id="i1"></span>
<span id="i2"></span>
<span id="i3"></span>
<span id="i4"></span>
<span id="i5"></span>
 
$$(':nth-last-child(1)'); //Returns Element #i5.
 
$$(':nth-last-child(2n)'); //Returns Elements #i2 and #i4.
 
$$(':nth-last-child(2n+1)') //Returns Elements #i1, #i3 and #i5.
 
$$(':nth-last-child(3n+2)') //Returns Elements #i1 and #i4.

Every Odd Child (same as 2n+1):

':nth-last-child(odd)'

Every Even Child (same as 2n):

':nth-last-child(even)'

Note:

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.

Selector: even

Matches every even child.

Пример:

$$('td:even');

Note:

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.

Selector: odd

Matches every odd child.

Пример:

$$('td:odd');

Note:

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.

Selector: index

Matches the node at the specified index

Пример:

$$('p:index(2)');       // Gets the third <p> tag.

Note:

This is zero-indexed.

Selector: first-child

Matches the first child.

Usage:

':first-child'

Пример:

$$('td:first-child');

Selector: last-child

Matches the last child.

Usage:

':last-child'

Пример:

$$('td:last-child');

Selector: only-child

Matches an only child of its parent Element.

Usage:

':only-child'

Пример:

$$('td:only-child');