jQuery Selector Reference: Target Elements with Precision

Explore jQuery's extensive selector options to precisely target elements by attributes, position, or relationships. Comprehensive guide to jQuery selectors.

jQuery: Selector Reference

jQuery provides a variety of selectors to target elements based on their attributes, position, or relation to other elements. Here's a comprehensive reference of jQuery selectors:

Selector Pattern	Example	Description
Element	`$('div')`	Selects all `<div>` elements
:first	`$('div:first')`	Selects the first `<div>` element in a DOM hierarchy.
:last	`$('div:last')`	Selects the last `<div>` element in a DOM hierarchy.
Multiple elements	`$('p, div, code')`	Selects `<p>`, `<div>`, and `<code>` elements
parent descendant	`$('div p')`	Selects all `<p>` elements which are descendants of `<div>`
parent child	`$('div > p')`	Selects `<p>` elements which are direct children of `<div>`
*	`$('*')`	Selects all elements
#Id	`$('#myDiv')`	Selects the element whose ID is `myDiv`
element#id	`$('div#myDiv')`	Selects `<div>` element whose ID is `myDiv`
Multiple Ids	`$('#myDiv1, #myDiv2')`	Selects multiple elements whose IDs are `myDiv1` or `myDiv2`.
.class	`$('.myCSSClass')`	Selects all elements with class `myCSSClass`
.class .class	`$('.myCSSClass1, .myCSSClass2')`	Selects all elements with class `myCSSClass1` or `myCSSClass2`
element.class	`$('div.myCSSClass')`	Selects all `<div>` elements with class `myCSSClass`
:first-child	`$('p:first-child')`	Selects all `<p>` elements which are the first child of their parent element.
:last-child	`$('p:last-child')`	Selects all `<p>` elements which are the last child of their parent element.
:nth-child(n)	`$('p:nth-child(5)')`	Selects all `<p>` elements which are the 5th child of their parent element.
:nth-last-child(n)	`$('p:nth-last-child(2)')`	Selects all `<p>` elements which are the 2nd last child of their parent element.
:only-child	`$('p:only-child')`	Selects all `<p>` elements which are the only child of their parent element.
[attribute]	`$('[class]')`	Selects all elements with the `class` attribute
element[attribute]	`$('div[class]')`	Selects all `<div>` elements that have a `class` attribute
element[attribute = value]	`$('div[class="myCls"]')`	Selects all `<div>` elements whose `class` attribute is equal to `myCls`
element[attribute \|= value]	`$('div[class\|="myCls"]')`	Selects all `<div>` elements whose `class` attribute is either equal to `myCls` or starts with `myCls` followed by a hyphen.
element[attribute *= "value"]	`$('div[class *= "myCls"]')`	Selects `<div>` elements whose `class` attribute contains `myCls`
element[attribute ~= "value"]	`$('div[class ~= "myCls"]')`	Selects `<div>` elements whose `class` attribute contains `myCls`, delimited by spaces.
element[attribute $= "value"]	`$('div[class $="myCls"]')`	Selects `<div>` elements whose `class` attribute value ends with `myCls` (case sensitive).
element[attribute != "value"]	`$('div[class != "myCls"]')`	Selects `<div>` elements which do not have a `class` attribute or whose value does not equal `myCls`
element[attribute ^= "value"]	`$('div[class ^= "myCls"]')`	Selects `<div>` elements whose `class` attribute value starts with `myCls`
:contains("value")	`$('div:contains('tutorialsarena')')`	Selects all `<div>` elements that contain the text `tutorialsarena`
:input	`$(':input')`	Selects all input elements
:button	`$(':button')`	Selects all input elements where type is `button`
:radio	`$(':radio')`	Selects all input elements where type is `radio`
:text	`$(':text')`	Selects all input elements where type is `text`
:checkbox	`$(':checkbox')`	Selects all input elements where type is `checkbox`
:submit	`$(':submit')`	Selects all input elements where type is `submit`
:password	`$(':password')`	Selects all input elements where type is `password`
:reset	`$(':reset')`	Selects all input elements where type is `reset`
:image	`$(':image')`	Selects all input elements where type is `image`
:file	`$(':file')`	Selects all input elements where type is `file`
:enabled	`$(':enabled')`	Selects all enabled input elements
:disabled	`$(':disabled')`	Selects all disabled input elements
:selected	`$(':selected')`	Selects all selected input elements
:checked	`$(':checked')`	Selects all checked input elements
:hidden	`$(':hidden')`	Selects all hidden elements
:visible	`$(':visible')`	Selects all visible elements
:odd	`$('tr:odd')`	Selects all odd rows (1, 3, 5, 7...)
:even	`$('tr:even')`	Selects all even rows (0, 2, 4, 6...)

Example Usage:

HTML


<!DOCTYPE html><br>
  <html><br>
  <head><br>
    <title>jQuery Selectors Example</title><br>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script><br>
    <script><br>
      $(document).ready(function() {<br>
        // Select all <div> elements<br>
        $('div').css('background-color', 'yellow');<br>
        // Select the first <p> element<br>
        $('p:first').css('font-weight', 'bold');<br>
        // Select all <p> elements inside <div> elements<br>
        $('div p').css('color', 'blue');<br>
        // Select the element with id "myDiv"<br>
        $('#myDiv').text('Updated text');<br>
        // Select all elements with class "myCSSClass"<br>
        $('.myCSSClass').css('border', '1px solid red');<br>
      });<br>
    </script><br>
  </head><br>
  <body><br>
  </body><br>
  </html>
  <body><br>
    <div id="myDiv">Original text</div><br>
    <p>First paragraph</p><br>
    <div><br>
      <p>Paragraph inside div</p><br>
    </div><br>
    <p class="myCSSClass">Styled paragraph</p><br>
  </body><br>
  </html>

Output


The HTML document will have the following changes:
- All  elements will have a yellow background.
- The first  element will be bold.
- All 
 elements inside  elements will have blue text.
- The  with ID "myDiv" will have its text updated to "Updated text".
- All elements with class "myCSSClass" will have a red border.