Those familiar with CSS knows how powerful and expressive they can be in selecting elements. Below are the CSS selectors that are supported by Karmagination (Note: Karmagination uses the Sizzle selector engine).
Supported CSS selectors
| Selector | Meaning | Example |
|---|---|---|
| * | all elements in the current document | $('*') |
| E | an element of type E | $('div') |
| E#myid | an E element with ID equal to “myid” | $('div#unique') |
| E.myclass | an E element with class name equal to “myclass” | $('div.current') |
| E[foo] | an E element with a “foo” attribute | $('div[title]') |
| E[foo=“bar”] | an E element whose “foo” attribute value is exactly equal to “bar” | $('div[title=fun]') |
| E[foo~=“bar”] | an E element whose “foo” attribute value is a list of whitespace-separated values, one of which is exactly equal to “bar” | $('div[title~=fun]' |
| E[foo^=“bar”] | an E element whose “foo” attribute value begins exactly with the string “bar” | $('div[title^=fun]') |
| E[foo$=“bar”] | an E element whose “foo” attribute value ends exactly with the string “bar” | $('div[title$=fun]') |
| E[foo*=“bar”] | an E element whose “foo” attribute value contains the substring “bar” | $('div[title*=fun]') |
| E[foo!=“bar”] | an E element whose “foo” attribute does not contain the string “bar” | $('div[title!=fun]') |
| E:nth-child(n/even/odd) | an E element, the nth/even/odd child of its parent | $('div:nth-child(n)') |
| E:first-child | an E element, first child of its parent | $('div:first-child') |
| E:last-child | an E element, last child of its parent | $('div:last-child') |
| E:only-child | an E element, only child of its parent | $('div:only-child') |
| E:not(s) | an E element that does not match selector s | $('div:not([title=fun])') |
| E:contains('text') | an E element that contains 'text' | $('div:contains(hungry)') |
| E:has(selector) | at least one of the descendent elements of E matches the selector | $('div:has(span)') |
| :visible | visible elements | $('div:visible') |
| :hidden | hidden elements | $('div:visible') |
| :first | first element | $('div:first') |
| :last | last element | $('div:last') |
| :even | even elements | $('div:even') |
| :odd | odd elements | $('div:odd') |
| :gt(n) | elements greater than index n | $('div:gt(2)') |
| :lt(n) | elements less than index n | $('div:lt(2)') |
| :eq(n) | elements equal to index n | $('div:eq(2)') |
| :input | all <input> elements | $(':input') |
| :text | all <input> elements of type=“text” | $(':text') |
| :radio | all <input> elements of type=“radio” | $(':radio') |
| :checkbox | all <input> elements of type=“checkbox” | $(':input') |
| :file | all <input> elements of type=“file” | $(':file') |
| :password | all <input> elements of type=“password” | $(':password') |
| :submit | all <input> elements of type=“submit” | $(':submit') |
| :image | all <input> elements of type=“image” | $(':image') |
| :reset | all <input> elements of type=“reset” | $(':reset') |
| :button | all <input> elements of type=“button” and <button> elements | $(':button') |
| :header | all <h1> <h2> <h3> <h4> etc elements | $(':header') |
| E F | an F element descendant of an E element | $('ul li') |
| E > F | an F element child of an E element | $('ul > li') |
| E + F | an F element immediately preceded by an E element | $('div + span') |
| E ~ F | an F element preceded by an E element | $('div ~ span') |