jQuery Filter Selectors

Filter selectors help you narrow down a group of elements. Instead of selecting all paragraphs or all list items, you can pick the first one, the last one, even-numbered ones, odd-numbered ones, or elements in a specific position. Filter selectors add precision to your selections.

What are Filter Selectors?

Filter selectors are written with a colon : prefix. They filter an existing selection based on position, state, or content. jQuery borrowed this idea from CSS pseudo-classes like :first-child and extended it further.

Common Filter Selectors

:first         → first matched element
:last          → last matched element
:even          → elements at even index (0, 2, 4...)
:odd           → elements at odd index (1, 3, 5...)
:eq(n)         → element at index n (starts at 0)
:gt(n)         → elements with index greater than n
:lt(n)         → elements with index less than n
:not(selector) → elements that do NOT match a selector
:hidden        → elements that are hidden
:visible       → elements that are visible
:contains(text)→ elements containing specific text
:empty         → elements with no children or text
:has(selector) → elements that contain a certain child

Diagram: Index-Based Filters

  $("li") selects:
  ┌───────────────────────────┐
  │ Index 0 → Apples          │  ← :first  :even  :eq(0)  :lt(2)
  │ Index 1 → Bananas         │  ← :odd    :eq(1)  :gt(0)  :lt(2)
  │ Index 2 → Cherries        │  ← :even   :eq(2)  :gt(1)
  │ Index 3 → Dates           │  ← :last   :odd    :eq(3)  :gt(2)
  └───────────────────────────┘

:first and :last

$("tr:first").css("background", "navy");
→ First table row gets a navy background (header row styling)

$("li:last").css("font-weight", "bold");
→ Last list item gets bold text

:even and :odd — Zebra Table Rows

This is the most popular use of filter selectors. You can style alternating table rows with different colours without touching the HTML.

$(document).ready(function() {
    $("tr:even").css("background-color", "#f2f2f2");
    $("tr:odd").css("background-color", "#ffffff");
});

Result Diagram

  Table Row 0 (index 0) → even → #f2f2f2 (light grey)
  Table Row 1 (index 1) → odd  → #ffffff (white)
  Table Row 2 (index 2) → even → #f2f2f2 (light grey)
  Table Row 3 (index 3) → odd  → #ffffff (white)

:eq(n) — Select by Exact Index

Index starts at 0 for the first element. Use :eq() to select exactly one element from the matched set.

$("li:eq(2)").css("color", "red");
→ The third list item (index 2) turns red

$("p:eq(0)").hide();
→ The very first paragraph hides

:gt(n) and :lt(n) — Range Filters

$("li:gt(1)").css("opacity", "0.5");
→ All list items after index 1 (i.e., from the 3rd onward) become semi-transparent

$("li:lt(2)").css("font-weight", "bold");
→ All list items before index 2 (i.e., first and second) become bold

:not() — Exclude Elements

$("p:not(.intro)").css("color", "grey");
→ All paragraphs except those with class "intro" turn grey

$("input:not([type='submit'])").css("border", "1px solid blue");
→ All inputs except the submit button get a blue border

:hidden and :visible

$("div:hidden").show();
→ All hidden divs become visible

$("p:visible").css("color", "green");
→ Only visible paragraphs turn green

:contains() — Filter by Text Content

HTML:
<p>Learn HTML today</p>
<p>Learn CSS today</p>
<p>Learn jQuery today</p>

jQuery:
$("p:contains('jQuery')").css("background", "yellow");
→ Only the third paragraph gets a yellow background

:empty — Find Empty Elements

$("td:empty").css("background", "#ffcccc");
→ All table cells with no content get a red background
→ Useful to highlight missing data in a table

:has() — Filter by Child Content

$("div:has(p)").css("border", "1px solid black");
→ Only divs that contain a <p> tag inside get a border
→ Divs without paragraphs are not affected

Combining Filters

$("li:not(:first):not(:last)").css("color", "blue");
→ All list items except the first and last turn blue

$("tr:even:not(:first)").css("background", "#e8f4fd");
→ Even rows but skip the very first row (usually the header)

Filter vs filter() Method

There is a difference between the :filter selector and the .filter() method. The selector form is written inside the $() function. The method form is chained after a selection. Both work, but the method form is more flexible for complex conditions.

Selector form:  $("li:even")
Method form:    $("li").filter(":even")

Both produce the same result.

Quick Summary

• Filter selectors use a colon prefix: :first, :last, :even, :odd.
• Index-based filters use :eq(n), :gt(n), :lt(n) — index starts at 0.
• Content filters include :contains(), :empty, :has().
• State filters include :hidden and :visible.
• Combine filters to create precise selections with less code.