| Selector |
Example |
Selects |
| * |
$("*") |
All elements |
| #id |
$("#lastname") |
The element with id="lastname" |
| .class |
$(".intro") |
All elements with class="intro" |
| .class,.class |
$(".intro,.demo") |
All elements that have the class "intro" or "demo" assigned to them. |
| element |
$("p") |
All <p> elements |
| el1,el2,el3 |
$("h1,div,p") |
All <h1>, <div> and <p> elements |
| |
|
|
| :first |
$("p:first") |
The first <p> element |
| :last |
$("p:last") |
The last <p> element |
| :even |
$("tr:even") |
All even <tr> elements |
| :odd |
$("tr:odd") |
All odd <tr> elements |
| |
|
|
| :first-child |
$("p:first-child") |
All <p> elements that come first within their parent elements. |
| :first-of-type |
$("p:first-of-type") |
All first <p> elements within their parent elements. |
| :last-child |
$("p:last-child") |
Any <p> element that is the final child within its parent. |
| :last-of-type |
$("p:last-of-type") |
All <p> elements that are the final element within their parent |
| :nth-child(n) |
$("p:nth-child(2)") |
Select all <p> elements that are the second child of their parent, without changing their width, height, HTML tags, or class. |
| :nth-last-child(n) |
$("p:nth-last-child(2)") |
All second <p> elements from the end, within their respective parent elements. |
| :nth-of-type(n) |
$("p:nth-of-type(2)") |
All second <p> elements within their respective parent elements. |
| :nth-last-of-type(n) |
$("p:nth-last-of-type(2)") |
Select the second <p> element within its parent, starting from the last child, for all <p> elements. |
| :only-child |
$("p:only-child") |
All <p> elements that are the sole child of their parent |
| :only-of-type |
$("p:only-of-type") |
Any <p> elements that are the sole child of their parent and have no other elements of the same type as siblings. |
| |
|
|
| parent > child |
$("div > p") |
All paragraphs (<p>) inside a <div> element that are directly placed inside it. |
| parent descendant |
$("div p") |
All <p> elements inside a <div> element |
| element + next |
$("div + p") |
The <p> element located adjacent to <div> elements. |
| element ~ siblings |
$("div ~ p") |
All <p> elements that come after the <div> element |
| |
|
|
| :eq(index) |
$("ul li:eq(3)") |
The fourth element in a list (index starts at 0) |
| :gt(no) |
$("ul li:gt(3)") |
Display items from a list starting at the fourth item. |
| :lt(no) |
$("ul li:lt(3)") |
Display items in a list that have an index value smaller than 3. |
| :not(selector) |
$("input:not(:empty)") |
All input elements that are not empty |
| |
|
|
| :header |
$(":header") |
Header elements such as <h1>, <h2>, and so on... |
| :animated |
$(":animated") |
All animated elements |
| :focus |
$(":focus") |
The element that currently has focus |
| :contains(text) |
$(":contains('Hello')") |
Find and select all elements that have the text 'Hello' inside them. |
| :has(selector) |
$("div:has(p)") |
All div elements containing a p element |
| :empty |
$(":empty") |
All elements that are empty |
| :parent |
$(":parent") |
All elements that contain another element |
| :hidden |
$("p:hidden") |
All concealed <p> elements |
| :visible |
$("table:visible") |
All visible tables |
| :root |
$(":root") |
The document's root element |
| :lang(language) |
$("p:lang(de)") |
All <p> elements that have a lang attribute beginning with 'de'. |
| |
|
|
| [attribute] |
$("[href]") |
All elements with a href attribute |
| [attribute=value] |
$("[href='default.htm']") |
All elements that have a 'href' attribute value matching 'default.htm'. |
| [attribute!=value] |
$("[href!='default.htm']") |
All elements that have an 'href' attribute value different from 'default.htm'. |
| [attribute$=value] |
$("[href$='.jpg']") |
Select all elements that have an 'href' attribute, and the value of this attribute must end with '.jpg'. |
| [attribute|=value] |
$("[title|='Tomorrow']") |
Any elements having a 'title' attribute set to 'Tomorrow' or starting with 'Tomorrow' followed by a hyphen should be selected. |
| [attribute^=value] |
$("[title^='Tom']") |
Any element that has a title attribute beginning with 'Tom'. |
| [attribute~=value] |
$("[title~='hello']") |
All elements that have a title attribute containing the word 'hello'. |
| [attribute*=value] |
$("[title*='hello']") |
All elements that have a 'title' attribute with the word 'hello' in their value. |
| |
|
|
| :input |
$(":input") |
All input elements |
| :text |
$(":text") |
All input elements with type="text" |
| :password |
$(":password") |
All input elements with type="password" |
| :radio |
$(":radio") |
All input elements with type="radio" |
| :checkbox |
$(":checkbox") |
All input elements with type="checkbox" |
| :submit |
$(":submit") |
All input elements with type="submit" |
| :reset |
$(":reset") |
All input elements with type="reset" |
| :button |
$(":button") |
All input elements with type="button" |
| :image |
$(":image") |
All input elements with type="image" |
| :file |
$(":file") |
All input elements with type="file" |
| :enabled |
$(":enabled") |
All enabled input elements |
| :disabled |
$(":disabled") |
All disabled input elements |
| :selected |
$(":selected") |
All selected input elements |
| :checked |
$(":checked") |
All checked input elements |
HTML
CSS
Javascript
Jquery