tiny-selectors.js - CSS3 Selectors for tinyJS

tiny-selectors.js updates the Selector-Filters to CSS3-Compatibility and adds some more useful filters.

Download

tiny-selectors.js [2901b] - tiny-selectors-min.js.gz [609b]

Hint

tiny-selectors requires only tiny.js. Other scripts are not necessary.

Usage

The Selection with t() supports after loading of tiny-selectors.js the following additional Selectors:

CSS3-Selectors

The following Selectors provide CSS3-Compatibility:

:target

Returns only elements with an id to be equal to location.hash.

location.hash='#top'; t('h1:target').length===1; location.hash='';

:enabled, :disabled

Tests if the disabled-Property of form fields is (un)set.

t('#testfeld input:enabled').length===11; t('#testfeld input:disabled').length===2

:checked

Filters checkboxes and radio buttons which are activated.

t('#testfeld input:checked').length===2

:root

Removes everything but <html> from the Selection.

t('#testfeld:root').length===0

:nth-last-child()

Selects only nodes that are the nth last child of their parent node.

t('#testfeld :nth-last-child(2)').length===2

:nth-of-type()

Selects only nodes to be the nth of their kind within their parent node.

t('#testfeld :nth-of-type(2)').length===3

:nth-last-of-type()

Selects only nodes that are the nth child of the same type within their parent node.

t('#testfeld :nth-last-of-type(3)').length===2

:first-of-type

Selects Nodes which are the first of their kind within their parent element.

t('#testfeld :first-of-type').length===5

:last-of-type

Selects only nodes that are the last of their kind within the parent element.

t('#testfeld :last-of-type').length===5

:only-of-type

Selects only nodes that are the only one of their kinds within the parent node.

t('#testfeld :only-of-type').length===1

Additional Selectors

The following Selectors are not standard, but very useful.

:gt()

Selects only the nodes after the nth Element.

t('#testfeld input:gt(7)').length===5

:lt()

Selects only the nodes previous to the nth Element.

t('#testfeld input:lt(5)').length===5

:eq()

Reduces the Selection to its nth Element.

t('#testfeld :eq(4)').length===1

:hidden

Selects all hidden Elements. In IE8 this filter may fail.

t('#testfeld:hidden').length===1

:visible

Returns only visible Elements. In IE8 this filter may fail.

t('#testfeld:visible').length===0

:selected

Returns <option>-Tags, which are selected.

t('#testfeld :selected').length===3

Input Selectors

The following Selectors are useful to distinguish input fields:

:checkbox

Selects only <input type="checkbox">.

t('#testfeld input:checkbox').length===2

:file

Selects only <input type="file">.

t('#testfeld input:file').length===1

:hidden

Selects only <input type="hidden">.

t('#testfeld input[type=hidden]:hidden').length===2

:image

Selects only <input type="image">.

t('#testfeld input:image').length===1

:password

Selects only <input type="password">.

t('#testfeld input:password').length===1

:radio

Selects only <input type="radio">.

t('#testfeld input:radio').length===3

:reset

Selects only <input type="reset">.

t('#testfeld input:reset').length===1

:submit

Selects only <input type="submit">.

t('#testfeld input:submit').length===1

:text

Selects only <input type="text">.

t('#testfeld input:text').length===1