Select all elements inside the document:
Select all elements inside the document:
$("*")
The .class selector selects all elements with the specific class. The class refers to the class attribute of an HTML element.
Select all elements with class "main":
$(".main")
The element selector selects all elements with the specific element name.
Select all <h2> elements:
$("h2")
The #id selector selects the element with the specific id. The id refers to the id attribute of an HTML element.
Select the element with the id "card":
$("#card")
The element selector can also be used to select multiple elements.
Note: Seperate each element with a comma.
Select all <h2>, <div> and <span> elements:
$("h2, div, span")
Selects all elements that are a direct child of the specified element
Select all <span> elements that are a direct child of a <div> element:
$("div > span")
Selects all elements that are descendants of a given ancestor. A descendant of an element could be a child, grandchild, great-grandchild, etc, of that element.
Select all <span> elements that are descendants of a <div> element:
$("div span")
Selects the "next" element of the specified "element". The "next" element must be placed right after the specified "element" to be selected.
Select the <p> element that are next to each <div> element:
$("div + p")
Selects sibling elements that appear after the specified "element". Note: Both of the specified elements must share the same parent.
Select all <p> elements that are siblings and appear after the <div> element:
$("div ~ p")
Select all elements that are in the progress of an animation at the time the selector is run.
Selects any element that is currently animated:
$(":animated")
Selects an element with a specific index number. The index numbers start at 0, so the first element will have the index number 0 (not 1).
Select the second <p> element:
$("p:eq(1)")
Selects each element with an even index number (0, 2, 4, etc.). The index numbers start at 0.
Select every other (even) <tr> element:
$("tr:even")
Selects each element with an odd index number (1, 3, 5, etc.). The index numbers start at 0. This is mostly used together with another selector to select every odd indexed element in a group (like in the example below).
Select every other (odd) <tr> element:
$("tr:odd")
Selects the first element. Note: This selector can only select one single element. Use the :first-child selector to select more than one element (one for each parent).
Select the first <p> element:
$("p:first")
Selects the last element. Note: This selector can only select one single element. Use the :last-child selector to select more than one element (one for each parent).
Select the last <p> element:
$("p:last")
Selects all header elements (<h1> to <h6>).
Select all header elements (<h1> to <h6>):
$(":header")
Selects all elements with the language attribute starting with a specified value. Note: The value has to be a whole word, either alone, like lang="en", or followed by a hyphen( - ), like lang="en-us".
Select all <p> elements with a lang attribute value that starts with "de":
$("p:lang(de)")
Selects all elements except the specified element. This is mostly used together with another selector to select everything except the specified element in a group (like in the example below).
Select all <p> elements except those with class="intro":
$("p:not(.intro)")
Selects the document's root element. In HTML, the root element is always the <html> element.
Set the background color for the HTML document to blue:
$(":root").css("background-color", "blue");
Selects the target element indicated by the fragment identifier of the document's URI. This kind of URI ends with a "number sign" (#) followed by an anchor identifier (called the fragment identifier).
Select this URL's URI https://example.com/#foo
$(":target")
Selects elements containing the specified string. The string can be contained directly in the element as text, or in a child element. This is mostly used together with another selector to select the elements containing the text in a group (like in the example below).
Select all <button> elements containing "share":
$("button:contains(share)")
Selects empty elements. An empty element is an element without child elements or text.
Select all empty elements:
$(":empty")
Selects all elements that have one or more elements inside of them, that matches the specified selector.
Select all <p> elements that have a <span> element inside of them:
$("p:has(span)")
Selects all elements that are the parent of another element, including text nodes.
Select all <td> elements with children, including text:
$("td:parent")
Selects every element that is currently visible. Visible elements are elements that are not:
Select all visible <p> elements:
$("p:visible")
Selects elements that have the specified attribute with a value either equal to a given string or starting with that string followed by a hyphen (-).
Select all <p> elements with a title attribute that starts with the value "Today":
$("p[title|='Today']")
Selects elements that have the specified attribute with a value containing a given substring.
Select all <input> elements with a name attribute that contains the word "country":
$("input[name*='country']")
Selects elements that have the specified attribute with a value containing a given word, delimited by spaces.
Select all <input> elements with a name attribute that contains the specific word "age":
$("input[name~='age']")
Selects elements that have the specified attribute with a value ending exactly with a given string. The comparison is case sensitive.
Select all <a> elements with a href attribute that ends with ".org":
$("a[href$='.org']")
Selects elements that have the specified attribute with a value exactly equal to a certain value.
Select every element containing an input attribute with the value "price":
$("[id='price']")
Select elements that either don't have the specified attribute, or do have the specified attribute but not with a certain value.
Select all < p > elements NOT containing a class attribute with the value "intro":
$("p[class!='intro']")
Selects elements that have the specified attribute with a value beginning exactly with a given string.
Select all <input> elements with a name attribute that starts with "contact":
$("input[name^='contact']")
Selects all elements that are the first child of their parent.
Select every <p> element that is the first child of its parent:
$("p:first-child")
Selects all elements that are the first child, of a particular type, of their parent.
Select every <p> element that is the first <p> element of its parent:
$("p:first-of-type")
Selects all elements that are the last child of their parent.
Select every <p> element that is the last child of its parent:
$("p:last-child")
Selects all elements that are the last child, of a particular type, of their parent.
Select every <p> element that is the last <p> element of its parent:
$("p:last-of-type")