Use 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.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>highlighted rows</title> | |
| <style> | |
| table { | |
| border-collapse: collapse; | |
| } | |
| td { | |
| padding-right: 10px; | |
| } | |
| .highlighted { | |
| background-color: #ffdc87; | |
| cursor: pointer; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <table> | |
| <tr class="highlighted"> | |
| <td>1</td><td>11</td><td>111</td> | |
| </tr> | |
| <tr> | |
| <td>2</td><td>22</td><td>222</td> | |
| </tr> | |
| <tr class="highlighted"> | |
| <td>3</td><td>33</td><td>333</td> | |
| </tr> | |
| <tr> | |
| <td>4</td><td>44</td><td>444</td> | |
| </tr> | |
| <tr class="highlighted"> | |
| <td>5</td><td>55</td><td>555</td> | |
| </tr> | |
| </table> | |
| </body> | |
| </html> |
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.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>Select checkboxes</title> | |
| </head> | |
| <body> | |
| <input type="checkbox" id="Checkbox1" name ="chk" value ="1" /> | |
| <input type="checkbox" id="Checkbox2" name ="chk" value ="2" /> | |
| <input type="checkbox" id="Checkbox3" name ="chk" value ="3" /> | |
| <input type="checkbox" id="Checkbox4" name ="chk" value ="4" /> | |
| <input type="button" id="demo" value ="Demo" /> | |
| <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.0.3.min.js"></script> | |
| <script> | |
| $("#demo").live("click", function () { | |
| $("input:checkbox[name=chk]").each(function () { | |
| alert("Id: " + $(this).attr("id") + " Value: " + $(this).val() + " Checked: " + $(this).is(":checked")); | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
References
Selectors – World Wide Web Consortium