MooTools Demos - Slick.Finder

Slick.Finder

A new standalone selector engine that is totally slick! And it is the new Selector Engine of MooTools

Reversed Combinators are a classification of combinators that are the reverse of their original. They redirect the flow of selectors and combinators to travel up the node tree rather than down. Slick implements these by prepending ! to a selector or combinator.

<p>
	Try a CSS Selector or pick one of the predefined ones.
</p>

<ul id="selector_list">
	<li><h4>CSS Selectors:</h4></li>
	<li>
		<a href="#">p, a, label</a><br />
		Matches all paragraph, links and labels
	</li>
	<li>
		<a href="#">tr td:first-child</a><br />
		Matches all first td in every row
	</li>
	<li>
		<a href="#">input:checked + label</a><br />
		Matches only the next label element where the previous checkbox is checked
	</li>
	<li>
		<a href="#">input[name="myCheckbox"] + label</a><br />
		Matches only the next label element where the previous has a name attribute containing "myCheckbox"
	<li>
		<a href="#">div:contains(Some text)</a><br />
		Checks if an element contains the string "Some text"
	</li>
	<li>
		<a href="#">table tr:odd td</a><br />
		Selects all td elements of the odd rows of the table
	</li>
	<li><h4>Reversed Combinators:</h4></li>
	<li>
		<a href="#">p !> .chapter</a><br />
		Matches a .chapter that is a direct parent of a paragraph
	</li>
	<li>
		<a href="#">p ! div.chapter</a><br />
		Matches a div.chapter which is any parent of a paragraph
	</li>
	<li>
		<a href="#">a !> strong ! th:nth-child(3) ! table</a><br />
		Give me every TABLE whose third TH contains a STRONG A
	</li>
</ul>

<h4>The elements we search in:</h4>
	
	<div id="seach_in_here">

<div class="chapter">
			<p>div.chapter > p</p>
			<p><strong>div.chapter > p > strong</strong></p>
		</div>

<table>
			<tr>
				<th>A</th>
				<th>Simple table</th>
				<th>with: <strong><a href="#">table > tr > th:nth-child(3) > strong > a</a></strong></th>
			</tr>
			<tr>
				<td>Some</td><td>Other</td><td>Text</td>
			</tr>
			<tr>
				<td>Some</td><td>Other</td><td>Text</td>
			</tr>
			<tr>
				<td>Some</td><td>Other</td><td>Text</td>
			</tr>
			<tr>
				<td>Some</td><td>Other</td><td>Text</td>
			</tr>
		</table>

<div>
			<input type="checkbox" checked><label>div > label</label>
			<input type="checkbox" checked><label>div > label</label>
			<input type="checkbox" name="myCheckbox"><label>div > label</label>
		</div>

</div>

Demo
Docs
CSS
HTML
JavaScript

Try a CSS Selector or pick one of the predefined ones.

CSS Selectors:
p, a, label
Matches all paragraph, links and labels
tr td:first-child
Matches all first td in every row
input:checked + label
Matches only the next label element where the previous checkbox is checked
input[name="myCheckbox"] + label
Matches only the next label element where the previous has a name attribute containing "myCheckbox"
div:contains(Some text)
Checks if an element contains the string "Some text"
table tr:odd td
Selects all td elements of the odd rows of the table
Reversed Combinators:
p !> .chapter
Matches a .chapter that is a direct parent of a paragraph
p ! div.chapter
Matches a div.chapter which is any parent of a paragraph
a !> strong ! th:nth-child(3) ! table
Give me every TABLE whose third TH contains a STRONG A

The elements we search in:

div.chapter > p

div.chapter > p > strong

A	Simple table	with: table > tr > th:nth-child(3) > strong > a
Some	Other	Text
Some	Other	Text
Some	Other	Text
Some	Other	Text

div > label div > label div > label

Some text
div

Documentation References:

<p>
	Try a CSS Selector or pick one of the predefined ones.
</p>

<h4>The elements we search in:</h4>
	
	<div id="seach_in_here">

<div class="chapter">
			<p>div.chapter > p</p>
			<p><strong>div.chapter > p > strong</strong></p>
		</div>

</div>

MooTools

Demos

Slick

Drag and Drop

Effects

Events

Request

Plugins

Slick.Finder

CSS Selectors:

Reversed Combinators:

The elements we search in:

Documentation References: