Scribd
Upload
171 views1 page

Class Element El1, El2, El3: Selector Example Selects

This document describes various CSS selectors that can be used to select elements in jQuery. It provides examples of common selectors like #id, .class, element, and describes how they select elements based on attributes like id, class, tag name. It also covers descendant selectors, child selectors, and pseudo-class selectors that select elements based on things like index, enabled/disabled state, or whether they are checked/selected.

Uploaded by

Elvis Kadic
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
171 views1 page

Class Element El1, El2, El3: Selector Example Selects

This document describes various CSS selectors that can be used to select elements in jQuery. It provides examples of common selectors like #id, .class, element, and describes how they select elements based on attributes like id, class, tag name. It also covers descendant selectors, child selectors, and pseudo-class selectors that select elements based on things like index, enabled/disabled state, or whether they are checked/selected.

Uploaded by

Elvis Kadic
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 1

Selector

*
#id
.class
.class,.class
element
el1,el2,el3

Example
$("*")
$("#lastname")
$(".intro")
$(".intro,.demo")
$("p")
$("h1,div,p")

Selects
All elements
The element with id="lastname"
All elements with class="intro"
All elements with the class "intro" or "demo"
All <p> elements
All <h1>, <div> and <p> elements

:first
:last
:even
:odd

$("p:first")
$("p:last")
$("tr:even")
$("tr:odd")

The first <p> element


The last <p> element
All even <tr> elements
All odd <tr> elements

:first-child
:first-of-type
:last-child
:last-of-type
:nth-child(n)
:nth-last-child(n)

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

:nth-of-type(n)
:nth-last-oftype(n)
:only-child
:only-of-type

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

All <p> elements that


All <p> elements that
All <p> elements that
All <p> elements that
All <p> elements that
All <p> elements that
last child
All <p> elements that
All <p> elements that
from the last child
All <p> elements that
All <p> elements that

parent > child


parent descendant
element + next
element ~ siblings

$("div
$("div
$("div
$("div

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


All <p> elements that are descendants of a <div> element
The <p> element that are next to each <div> elements
All <p> elements that are siblings of a <div> element

:eq(index)
:gt(no)
:lt(no)
:not(selector)

$("ul li:eq(3)")
$("ul li:gt(3)")
$("ul li:lt(3)")
$("input:not(:empty)")

The fourth element in a list (index starts at 0)


List elements with an index greater than 3
List elements with an index less than 3
All input elements that are not empty

:header
:animated
:focus
:contains(text)
:has(selector)
:empty
:parent
:hidden
:visible
:root
:lang(language)

$(":header")
$(":animated")
$(":focus")
$(":contains('Hello')")
$("div:has(p)")
$(":empty")
$(":parent")
$("p:hidden")
$("table:visible")
$(":root")
$("p:lang(de)")

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


All animated elements
The element that currently has focus
All elements which contains the text "Hello"
All <div> elements that have a <p> element
All elements that are empty
All elements that are a parent of another element
All hidden <p> elements
All visible tables
The document's root element
All <p> elements with a lang attribute value starting with "de"

[attribute]
[attribute=value]
[attribute!=value]
[attribute$=value]
[attribute|=value]

$("[href]")
$("[href='default.htm']")
$("[href!='default.htm']")
$("[href$='.jpg']")
$("[title|='Tomorrow']")

[attribute^=value]
[attribute~=value]
[attribute*=value]

$("[title^='Tom']")
$("[title~='hello']")
$("[title*='hello']")

All elements with a href attribute


All elements with a href attribute value equal to "default.htm"
All elements with a href attribute value not equal to "default.htm"
All elements with a href attribute value ending with ".jpg"
All elements with a title attribute value equal to 'Tomorrow', or starting with
'Tomorrow' followed by a hyphen
All elements with a title attribute value starting with "Tom"
All elements with a title attribute value containing the specific word "hello"
All elements with a title attribute value containing the word "hello"

:input
:text
:password
:radio
:checkbox
:submit
:reset
:button
:image
:file
:enabled
:disabled
:selected
:checked

$(":input")
$(":text")
$(":password")
$(":radio")
$(":checkbox")
$(":submit")
$(":reset")
$(":button")
$(":image")
$(":file")
$(":enabled")
$(":disabled")
$(":selected")
$(":checked")

All
All
All
All
All
All
All
All
All
All
All
All
All
All

> p")
p")
+ p")
~ p")

are
are
are
are
are
are

the
the
the
the
the
the

first child of their parent


first <p> element of their parent
last child of their parent
last <p> element of their parent
2nd child of their parent
2nd child of their parent, counting from the

are the 2nd <p> element of their parent


are the 2nd <p> element of their parent, counting
are the only child of their parent
are the only child, of its type, of their parent

input elements
input elements with type="text"
input elements with type="password"
input elements with type="radio"
input elements with type="checkbox"
input elements with type="submit"
input elements with type="reset"
input elements with type="button"
input elements with type="image"
input elements with type="file"
enabled input elements
disabled input elements
selected input elements
checked input elements

You might also like