CSS3, jQuery Tutorial – Selectors Reference

css3_logoUse pattern matching rules to select elements in  your HTML document when using CSS and jQuery. These pattern rules are , called selectors. They can be simple element names up through rich contextual patterns. If all conditions in the pattern are true for a certain element, the selector matches the element.

Selectors may apply to:

  • All elements of a specific type, e.g. the second level headers <h2>
  • Elements specified by attribute, in particular:
    • id: an identifier unique to the document
    • class
  • Elements depending on how they are placed relative to, or nested within, others in the document tree.

jQuery and CSS selectors generally share the same syntax. The purposes for the selectors are somewhat different. CSS is used to select elements in your HTML document for you to stylize the text. In jQuery you often select an element and then do something with it, such as change a class or add a new element.

That said, the main selectors you will use are common to both jQuery and CSS.

Browser Compatibility, jQuery

You can determine which selectors to use in canIuse.com section on CSS 2.1 Selectors and CSS3 selectors. Modern browsers support CSS3, except for IE8.

To add support for various CSS selectors not supported by IE7 and IE8, you can use Selectivizr JavaScript, which adds support for “19 CSS3 pseudo-classes, 2 pseudo-elements and every attribute selector to older versions of IE”. For more information on which IE version support which CSS selectors, see CSS Compatibility and Internet Explorer.

You will use selectors when you use jQuery to select and manipulate HTML element(s).

HTML elements based on their id, classes, types, attributes, values of attributes and much more. It’s based on the existing CSS Selectors, and in addition, it has some own custom selectors.

Top n Selectors

The Selectors

Selector CSS Example jQuery Example Example description CSS
* * $(“*”) Selects all elements 2
.class .intro $(“.intro”) Selects all elements with class=”intro” 1
#id #firstname $(“#lastname”) Selects the element with id=”firstname” 1
element p $(“p”) Selects all <p> elements 1
element,element div,p $(“h1,div,p”) Selects all <div> elements and all <p> elements 1
element element div p $(“div p”) Selects all <p> elements inside <div> elements 1
element>element div>p $(“div > p”) Selects all <p> elements where the parent is a <div> element 2
element+element div+p

$(“div + p”)

Selects all <p> elements that are placed immediately after <div> elements 2
[attribute] [target] $(“[href]”) Selects all elements with a target attribute 2
[attribute=value] [target=_blank] $(“[href=’default.htm’]”) Selects all elements with target=”_blank” 2
[attribute~=value] [title~=flower] $(“[title~=’flower’]”) Selects all elements with a title attribute containing the word “flower” 2
[attribute|=value] [lang|=en]

$(“[title|=’Tomorrow’]”)

CSS: Selects all elements with a lang attribute value starting with “en”
jQuery: All elements with a title attribute value equal to ‘Tomorrow’, or starting with ‘Tomorrow’ followed by a hyphen
2
[attribute!=value]   $(“[href!=’default.htm’]”) All elements with a href attribute value not equal to “default.htm”  
[attribute$=value]   $(“[href$=’.jpg’]”) All elements with a href attribute value ending with “.jpg”  
[attribute^=value] a[href^=”http”] $(“[title^=’Tom’]”) All elements with a title attribute value starting with “Tom”  
[attribute*=value]

a[title*=’hello’]

$(“a[title*=’hello’]”)

All <a> elements with a title attribute value containing the word “hello”  
:link a:link   Selects all unvisited links 1
:visited a:visited   Selects all visited links 1
:active a:active   Selects the active link 1
:hover a:hover   Selects links on mouse over 1
:focus input:focus $(“input:focus”) Selects the input element which has focus 2
:first-letter p:first-letter   Selects the first letter of every <p> element 1
:first-line p:first-line   Selects the first line of every <p> element 1
:first   $(“p:first”) The first <p> element  
:first-child p:first-child $(“p:first-child”) Selects every <p> element that is the first child of its parent 2
:before p:before   Insert content before  the content of every <p> element 2
:after p:after   Insert content after every <p> element 2
:lang(language) p:lang(it)   Selects every <p> element with a lang attribute equal to “it” (Italian) 2
element1~element2 p~ul   Selects every <ul> element that are preceded by a <p> element 3
[attribute^=value] a[src^=”https”]   Selects every <a> element whose src attribute value begins with “https” 3
[attribute$=value] a[src$=”.pdf”]   Selects every <a> element whose src attribute value ends with “.pdf” 3
[attribute*=value] a[src*=”nextechu”]   Selects every <a> element whose src attribute value contains the substring “nextechu” 3
:first-of-type p:first-of-type $(“p:first-of-type”) Selects every <p> element that is the first <p> element of its parent 3
:last-of-type p:last-of-type $(“p:last-of-type”) Selects every <p> element that is the last <p> element of its parent 3
:only-of-type p:only-of-type $(“p:only-of-type”) Selects every <p> element that is the only <p> element of its parent 3
:only-child p:only-child $(“p:only-child”) Selects every <p> element that is the only child of its parent 3
:nth-child(n) p:nth-child(2) $(“p:nth-child(2)”) Selects every <p> element that is the second child of its parent 3
:nth-last-child(n) p:nth-last-child(2) $(“p:nth-last-child(2)”) Selects every <p> element that is the second child of its parent, counting from the last child 3
:nth-of-type(n) p:nth-of-type(2) $(“p:nth-of-type(2)”) Selects every <p> element that is the second <p> element of its parent 3
:nth-last-of-type(n) p:nth-last-of-type(2) $(“p:nth-last-of-type(2)”) Selects every <p> element that is the second <p> element of its parent, counting from the last child 3
:last   $(“p:last”) The last <p> element  
:last-child p:last-child $(“p:last-child”) Selects every <p> element that is the last child of its parent 3
:root :root $(“:root”) Selects the document’s root element 3
:empty p:empty   Selects every <p> element that has no children (including text nodes) 3
:target #news:target   Selects the current active #news element (clicked on a URL containing that anchor name) 3
:enabled input:enabled $(“:enabled”) Selects every enabled <input> element 3
:disabled input:disabled $(“:disabled”) Selects every disabled <input> element 3
:checked input:checked $(“:checked”) Selects every checked <input> element 3
:selected   $(“:selected”) All selected input elements  
:not(selector) :not(p)   Selects every element that is not a <p> element 3
::selection ::selection   Selects the portion of an element that is selected by a user 3
:even   $(“tr:even”) All even <tr> elements  
:odd   $(“tr:odd”) All odd <tr> elements  
:eq(index)   $(“ul li:eq(3)”) The fourth element in a list (index starts at 0)  
:gt(no)  

$(“ul li:gt(3)”)

List elements with an index greater than 3  
:lt(no)   $(“ul li:lt(3)”) List elements with an index less than 3  
:not(selector)   $(“input:not(:empty)”) All input elements that are not empty  
:lang(language)   $(“p:lang(de)”) All <p> elements with a lang attribute value starting with “de”  
:header   $(“:header”) All header elements <h1>, <h2> …  
:animated   $(“:animated”) All animated elements  
:focus     The element that currently has focus  
:contains(text)   $(“:contains(‘Hello’)”) All elements which contains the text “Hello”  
:parent   $(“:parent”) All elements that are a parent of another element  
:hidden   $(“p:hidden”) All hidden <p> elements  
:visible   $(“table:visible”) All visible tables  
:input   $(“:input”) All input element  
:text   $(“:text”) All input elements with type=”text”  
:password   $(“:password”) All input elements with type=”password”  
:radio   $(“:radio”) All input elements with type=”radio”  
:submit   $(“:submit”) All input elements with type=”submit”  

Examples

Selecting rows in a table and highlighting every other row.

A click event handler has been assigned to the HTML input button. When the button is clicked, jQuery finds all the checkboxes with name “chk” using input:checkbox[name=chk] selector and then the Id, value and state of the all HTML input checkboxes are displayed in alert using jQuery.

References

Selectors – World Wide Web Consortium

CSS Selector Reference

The 30 CSS Selectors you Must Memorize

CSS Compatibility and Internet Explorer – Selectors

Advertisements