jQuery Selectors

Written by RedoHub Team · Last updated: August 1, 2026

Selectors are the foundation of everything you do in jQuery. They allow you to "pick" or "select" the HTML elements you want to work with. If you are already familiar with CSS selectors, you are 90% of the way there because jQuery uses almost the exact same syntax.

The Power of $()

In jQuery, you use the $() function to select elements. Inside the parentheses, you place a string that tells jQuery what to look for. Once an element is selected, you can immediately chain an action to it.

Generic Pattern:
$( "your-selector-here" ).action();

1. Basic Selectors

These are the selectors you will use most often in your daily development.

Element Selector

$("p")

Selects all <p> elements on the page.

ID Selector

$("#header")

Selects the single element with id="header".

Class Selector

$(".btn")

Selects all elements with class="btn".

2. Attribute Selectors

You can target elements based on their HTML attributes, such as href, src, or type.

Selector	Description
`$("[href]")`	Selects all elements with an href attribute.
`$("a[target='_blank']")`	Selects all links that open in a new window.
`$("input[type='text']")`	Selects all text input fields in a form.

3. Advanced Pseudo-Selectors

jQuery provides several custom "pseudo-selectors" that make it incredibly easy to target specific elements in a list.

// Selects the first  element
$("p:first").css("color", "red");

// Selects the last  element
$("li:last").addClass("active");

// Selects all even numbered table rows
$("tr:even").css("background", "#eee");

// Selects all odd numbered list items
$("li:odd").fadeOut();

Common jQuery Selectors Reference

Here is a handy reference table of the most common selectors you'll need:

Syntax	Description
`$("*")`	Selects every single element on the page.
`$(this)`	Selects the current HTML element being interacted with.
`$("p.intro")`	Selects all <p> elements with class="intro".
`$("ul li:first")`	Selects the first <li> of the first <ul>.
`$(":button")`	Selects all <button> elements and input elements of type button.
`$("tr:even")`	Selects all even table rows (2nd, 4th, etc.).
`$("tr:odd")`	Selects all odd table rows (1st, 3rd, etc.).

Real-World Demo: Interactive Selection

Imagine you have a simple list. With one line of jQuery, we can target specific items based on their position.

<ul id="demoList">
    <li>Item 1 (Odd)</li>
    <li>Item 2 (Even)</li>
    <li>Item 3 (Odd)</li>
    <li>Item 4 (Even)</li>
</ul>

Important Note: Unlike CSS where indices usually start at 1, jQuery's :even and :odd selectors are 0-indexed. This means the first item is 0 (even), the second is 1 (odd), and so on.

Why Use jQuery Selectors Over Vanilla JS?

Vanilla JavaScript

Requires different methods for different targets:

getElementById()
getElementsByClassName()
querySelectorAll()

jQuery Selection

One function to rule them all:

$() handles everything.
Supports older browsers automatically.
Returns a jQuery object with built-in methods.

Key Points to Remember

Use #id for a specific element (IDs should be unique).
Use .class for multiple elements with the same styling or behavior.
The $() selector returns a collections of elements even if only one is found.
You can "drill down" selectors just like CSS: $("div p span").
Selectors are much faster than selecting elements manually in pure JS for complex queries.

Common Mistakes to Avoid

Assuming :even/:odd are CSS selectors. They aren't part of the CSS spec — they're jQuery-only extensions, so document.querySelectorAll(":even") will throw in plain JavaScript.

Re-running the same selector repeatedly inside a loop. $("#list") re-queries the DOM every time it's called — cache the result in a variable once and reuse it if you're going to reference the same elements multiple times.

Using an ID selector that matches nothing, then chaining actions on it. jQuery doesn't error on an empty selection — $("#missing").hide() just does nothing, which can hide real bugs during development.

Try It: Filtering a List by Class

A second example combining an element selector with a class selector to target a specific subset of items:

<ul>
    <li class="done">Buy milk</li>
    <li>Walk the dog</li>
    <li class="done">Reply to email</li>
</ul>

<script>
    $(function() {
        $("li.done").css("text-decoration", "line-through");
    });
</script>

Frequently Asked Questions

Q: Are jQuery selectors the same as CSS selectors?

A: Mostly — jQuery supports standard CSS selectors plus a handful of extras like :even, :odd, and :visible that aren't valid CSS.

Q: What happens if my selector matches zero elements?

A: jQuery returns an empty collection — calling methods on it is safe and simply does nothing, no error is thrown.

Q: Can I combine multiple selectors at once?

A: Yes — comma-separate them, e.g. $("h1, h2, .intro"). See the full jQuery selectors reference for every supported pattern.

« Previous Lesson Next Lesson »