ict.ken.be

Delivering solid user friendly software solutions since the dawn of time.

Selectors Overview

Categories: CSS Javascript

CSS SELECTORS

element
#elementId
.elementClass
* { any element }
#elementId * { all children of elementId } E { all tags E }
E F { all tags F descendants of E } E>F { all tags F direct children of E } // child combinator E+F { all tags F immediately preceded by sibling E } // adjacent selector E~F { all tags F preceded by any sibling E } // sibling combinator E.C { all tags E with class C }  // .C = *.C E#I { all tags E with id I } // #I = *#I E[A] { all tags E with attribute A } E[A=V] { all tags E with attribute A of value V } // eg. a[href="foo"] E[A^=V] { all E with attribute A value beginning with V } E[A$=V] { all E with attribute A value end with V } // eg. a[href$=".jpg"] E[A*=V] { all E with attribute A value contains with V }
E[A~=V] { all E with value in space separated list A }
a:link { anchors tags that not been clicked on }
a:visited { anchors tags that have been clicked }
X:checked { all checked radio and checkboxes }
X:disabled, X:enabled
X:after, X:before { generate content around an element } // eg. .crumb:after { content : ">" }
X:hover { styling element on hover over } // user action pseudo class
X:not(selector) // eg. div:not(#container)
X:first-child
X:last-child
X:only-child { target elements wich are only child of parent }
X:only-of-type { elements that have no siblings within parent container }
X:first-of-type { first sibling of its type }
X:nth-child(n) {
nth-child is 1-based all the other selectors are 0-based }
X:nth-child(Xn+Y) { every x element }
X:nth-last-child(n)
X:nth-of-type(n) { select according to type of element }
X:nth-last-of-type(n)
X:nth-child(even|odd)
X::first-letter { first letter of block elements }
X::first-line { first line of block elements }

JQUERY SELECTORS

:animated
:button
:checkbox
:checkbox:checked
:contains(foo) :file :header //h1 -> h6 :hidden :image //input[type=image] :input //input, select, textarea, button :not(filter) :parent //all elements that have children including text but not empty ones :password :radio
:radio:checked :reset :selected :submit :text :visible
:even
:odd
:eq(n) returns nth matching element
:gt(n) elements after nth matching
:lt(n) elements before nth matching
E:has(F) all tags E with at least one F contained //only one nested level eg. foo:not(bar:has(baz))

XPATH-JQUERY PLUGIN

/html//form/fieldset all <fieldset> elements direct under <form>
/html//form/*/input all <input> elements directly under exactly on element under <form>
//div/.. matches all elements that are direct parent to a <div>
//div[@foo=bar]
//div[@p] all div elements with at least one <p>
position() equals :first
position()>n equals :gt(n)