Basic Selectors

Jquery provide css like selectors. But Unlike css, jquery is having many more selectors than CSS2.

Jquery Code Description Execute Output
$("element") $("p").css({ "color":"red"}) select all elements with tag name in example.

Para 1

Para 2

$("#id") $("#p1").css({ "color":"blue"}) select single element with id name in example.
If id name is repeated, only first match will be executed.

Para with id p1

$(".class") $(".p1").css({ "color":"aqua"}) select all elements with class name in example.

Para with class p1

another p with class p1

$("ul li") $("ul li").css({ "color":"yellow"}) select all descendent of ul element.
  • List 1
  • List 2
  • List 3
$("ul,ol") $("ul,ol").css({ "color":"gray"}) select all descendent of ul element.
  • List 1
  • List 2
  1. List 1
  2. List 2

Basic Filters

Jquery Code Description Execute Output
$(":first") $("ul li:first").css({
"background":"red"})
select the first match elementin example.
  • List 1
  • List 2
  • List 3
  • List 4
$(":last") $("ul li:last").css({
"background":"red"})
select the last match elementin example.
  • List 1
  • List 2
  • List 3
  • List 4
$(":not(selector)") $("ul li:not(li:first)").css({
"background":"red"})
select all elements except givenin example.
  • List 1
  • List 2
  • List 3
  • List 4
$(":even") $("ul li:even").css({
"background":"red"})
select all even indexed elementsin example.
  • List 1
  • List 2
  • List 3
  • List 4
$(":odd") $("ul li:odd").css({
"background":"red"})
select all odd indexed elements in example.
  • List 1
  • List 2
  • List 3
  • List 4
$(":eq(index)") $("ul li:eq(1)").css({
"background":"red"})
select element atnth index in example.
  • List 1
  • List 2
  • List 3
  • List 4
$(":lt(index)") $("ul li:lt(2)").css({ "background":"red"}) select elements greater than nth index in example.
  • List 1
  • List 2
  • List 3
  • List 4
$(":gt(index)") $("ul li:gt(2)").css({ "background":"red"}) select elements greater than nth index in example.
  • List 1
  • List 2
  • List 3
  • List 4


Filter by Content

Jquery Code Description Execute Output
$(":contains(text)") $("p:contains(hello)").css({
"background":"red"})
select the p element with text "hello"in example.

hola

hello

$(":empty") $("ul li:empty").css({
"background":"red"})
select only empty elements in example.
  • List 1
$(":has(selector)") $("ul li:has(a)").css({
"background":"red"})
select only elements with descendants a in example.
$(":parent") $("table tr td:parent").css({
"background":"red"})
:parent is inverse of : empty in example.
row 1, col 1row 1, col 2
row 2, col 1row 2, col 2

Child Filters

Jquery Code Description Execute Output
$(":first-child") $("ul li:first-child").css({
"background":"red"})
select first child element in example.
  • List 1
  • List 2
  • List 3
$(":last-child") $("ul li:last-child").css({
"background":"red"})
select last child element in example.
  • List 1
  • List 2
  • List 3
$(":nth-child(n)") $("ul li:nth-child(2)").css({
"background":"red"})
select nth child element in example.
  • List 1
  • List 2
  • List 3
$(":nth-child(odd)") $("ul li:nth-child(odd)").css({
"background":"red"})
select odd child elements in example.
  • List 1
  • List 2
  • List 3
  • List 4
$(":nth-child(even)") $("ul li:nth-child(even)").css({
"background":"red"})
select even child elements in example.
  • List 1
  • List 2
  • List 3
  • List 4
$(":nth-child(equation)") $("ul li:nth-child(3n)").css({
"background":"red"})
select nth factor elements in example.
  • List 1
  • List 2
  • List 3
  • List 4
  • List 5
  • List 6
$(":only-child") $("ul li:only-child").css({
"background":"red"})
select element with only one child in example.
  • List 1


Attribute Filters

Jquery Code Description Execute Output
$("[ attribute ]") $("ul li[id]").css({
"background":"red"})
select element with attribue name in example.
  • List 1
  • List with id
  • List 3
$("[ attribute='value' ]") $("input[ name='firstname']").css({
"outline":"solid red"})
select element with attribute name and value in example.
$("[ attribute!='value' ]") $("li[ class!='col']").css({
"outline":"solid red"})
select element with attribute value not equal to value in example.
  • List class col
  • List without class col
$("[ attribute^='value' ]") $("li[class^='col']").css({
"outline":"solid red"})
select element with attribute value starting exactly with given string in example.
  • List class col
  • List class col
  • List without class col
$("[ attribute$='value' ]") $("li[class$='2']").css({
"outline":"solid red"})
select element with attribute value ending exactly with given string in example.
  • List class col2
  • List class col
$("[ attribute*='value' ]") $("li[class*='o']").css({
"outline":"solid red"})
select element that have attribute with a value containing subtring in example.
  • List class col2
  • List class col