jQuery Selectors

Selectors are the foundation of jQuery. They determine which elements on the page jQuery will act upon. Before any action — changing text, hiding an element, or responding to a click — jQuery must first find and select the right element(s).

jQuery's selectors are based on CSS selectors, so anyone familiar with CSS will recognize them immediately.

What is a Selector?

A selector is a pattern written inside the $() function that matches one or more HTML elements. Once selected, jQuery methods can be applied to all matched elements at once.

$(selector).method();

Think of a selector as a search query — it tells jQuery: "Find all elements that match this description."

Basic Selectors

These are the most commonly used selectors and directly mirror CSS syntax.

Element Selector

Selects all elements of a given HTML tag.

$("p")       // Selects all <p> elements
$("h2")      // Selects all <h2> elements
$("li")      // Selects all <li> elements

ID Selector

Selects a single element with a specific id attribute. IDs must be unique on a page.

$("#main-title")   // Selects element with id="main-title"
$("#submitBtn")    // Selects element with id="submitBtn"

Class Selector

Selects all elements that have a specific CSS class.

$(".highlight")   // Selects all elements with class="highlight"
$(".card")        // Selects all elements with class="card"

Universal Selector

Selects every element on the page. Use with caution as it can be slow on large pages.

$("*")    // Selects all elements

Multiple Selector

Selects multiple different elements at once by separating them with commas.

$("h1, h2, p")    // Selects all h1, h2, and p elements

Attribute Selectors

Attribute selectors find elements based on their HTML attributes and values.

$("[href]")            // Elements that have an href attribute
$("[type='text']")     // Input elements with type="text"
$("[class^='btn']")    // Elements whose class starts with "btn"
$("[src$='.png']")     // Elements whose src ends with ".png"

Example

$(function() {
  // Highlight all text inputs
  $("[type='text']").css("background-color", "#fffde7");
});

Hierarchy Selectors

These selectors find elements based on their relationship to other elements in the HTML structure.

Descendant Selector

Selects all matching elements inside a parent, no matter how deeply nested.

$("div p")    // All <p> elements inside any <div>

Child Selector

Selects only the direct children of a parent element.

$("ul > li")    // Only <li> elements that are direct children of <ul>

Adjacent Sibling Selector

Selects the element immediately following a specified element.

$("h3 + p")    // The first <p> immediately after an <h3>

Filter Selectors

Filter selectors narrow down a selection based on position, state, or content.

Position Filters

$("li:first")     // The first <li> element
$("li:last")      // The last <li> element
$("li:eq(2)")     // The <li> at index 2 (third item, zero-indexed)
$("li:even")      // All even-indexed <li> elements (0, 2, 4...)
$("li:odd")       // All odd-indexed <li> elements (1, 3, 5...)

Content Filters

$("p:contains('jQuery')")   // <p> elements containing the word "jQuery"
$("div:empty")              // <div> elements with no children
$("div:has(p)")             // <div> elements that contain a <p> inside

Visibility Filters

$("p:visible")    // All visible <p> elements
$("p:hidden")     // All hidden <p> elements

Practical Example: Using Multiple Selectors

<ul id="fruitList">
  <li>Apple</li>
  <li class="tropical">Mango</li>
  <li>Banana</li>
  <li class="tropical">Pineapple</li>
</ul>

<script>
$(function() {
  // Hide the first list item
  $("#fruitList li:first").hide();

  // Change text color of tropical fruits
  $(".tropical").css("color", "orange");
});
</script>

Key Points

• Selectors go inside the $() function and must be quoted strings.
• #id selects by ID, .class selects by class, and tag selects by element type.
• jQuery selectors follow the same syntax as CSS selectors.
• Multiple selectors can be combined using commas.
• Filter selectors like :first, :last, and :eq(n) help target specific elements within a group.
• Selectors are case-sensitive.