Jquery Selectors

Written By: Avinash Malhotra

Updated on

  1. Home
  2. Web Designing
  3. JQuery
  4. JQuery Selectors

Jquery Selectors

Jquery use css like selectors. But Unlike css, jquery is having many more selectors than CSS2. Here is a list of complete jquery selectors with live example and code.

Jquery Basic Selectors

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 > li") $("ul > li").css({ "color":"aqua"}) select all child selectors of ul element.
  • List 1
  • List 2
  • List 3
$("ul,ol") $("ul,ol").css({ "color":"gray"}) select grouping of ul and ol element.
  • List 1
  • List 2
  1. List 1
  2. List 2

Jquery 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