jQuery Selectors

Use our jQuery Selector Tester to demonstrate the different selectors.

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 with the class "intro" or "demo"

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 are the first child of their parent

:first-of-type

$("p:first-of-type")

All <p> elements that are the first <p> element of their parent

:last-child

$("p:last-child")

All <p> elements that are the last child of their parent

:last-of-type

$("p:last-of-type")

All <p> elements that are the last <p> element of their parent

:nth-child(n)

$("p:nth-child(2)")

All <p> elements that are the 2nd child of their parent

:nth-last-child(n)

$("p:nth-last-child(2)")

All <p> elements that are the 2nd child of their parent, counting from the last child

:nth-of-type(n)

$("p:nth-of-type(2)")

All <p> elements that are the 2nd <p> element of their parent

:nth-last-of-type(n)

$("p:nth-last-of-type(2)")

All <p> elements that are the 2nd <p> element of their parent, counting from the last child

:only-child

$("p:only-child")

All <p> elements that are the only child of their parent

:only-of-type

$("p:only-of-type")

All <p> elements that are the only child, of its type, of their parent

 

 

 

parent > child

$("div > p")

All <p> elements that are a direct child of a <div> element

parent descendant

$("div p")

All <p> elements that are descendants of a <div> element

element + next

$("div + p")

The <p> element that are next to each <div> elements

element ~ siblings

$("div ~ p")

All <p> elements that appear 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)")

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

 

 

 

:header

$(":header")

All header elements <h1>, <h2> ...

:animated

$(":animated")

All animated elements

:focus

$(":focus")

The element that currently has focus

:contains(text)

$(":contains('Hello')")

All elements which contains the text "Hello"

:has(selector)

$("div:has(p)")

All <div> elements that have a <p> element

:empty

$(":empty")

All elements that are empty

:parent

$(":parent")

Login
ADS CODE