jQuery Element Selector

The element selector is the simplest way to select HTML elements using jQuery. It lets you target all elements of a specific HTML tag type — like all paragraphs, all headings, or all buttons — and apply actions to them at once.

What is an Element Selector?

An element selector selects HTML elements by their tag name. If you write $("p"), jQuery finds every <p> tag on the page. If you write $("h2"), it finds every <h2> tag.

Basic Syntax

$("tagname")

Examples:
$("p")      → selects all <p> elements
$("h1")     → selects all <h1> elements
$("li")     → selects all <li> elements
$("table")  → selects all <table> elements
$("input")  → selects all <input> elements

Diagram: Element Selector in Action

  HTML Page:
  ┌───────────────────────────────────┐
  │  <p>First paragraph</p>           │
  │  <p>Second paragraph</p>          │
  │  <h2>A Heading</h2>               │
  │  <p>Third paragraph</p>           │
  └───────────────────────────────────┘

  $("p").hide()
         │
         ├── Finds <p>First paragraph</p>   → hides it
         ├── Finds <p>Second paragraph</p>  → hides it
         └── Finds <p>Third paragraph</p>   → hides it

  <h2> is NOT affected because we selected only "p"

Real-Life Analogy

Imagine a school. You call out: "All students in Class 5, stand up." Only Class 5 students stand — no one else. The element selector works the same way. You name a tag type, and jQuery picks every element with that tag.

Basic Example — Hiding All Paragraphs

$(document).ready(function() {
    $("p").hide();
});

This hides every paragraph on the page when the page loads.

Applying Styles to All Headings

$(document).ready(function() {
    $("h2").css("color", "blue");
});

Every <h2> on the page turns blue. You do not need to touch each heading separately.

Selecting Multiple Element Types

You can select more than one element type at a time by separating them with commas.

$("p, h2, li").css("font-size", "18px");

This applies the font size to all paragraphs, all h2 headings, and all list items together.

Diagram: Multiple Element Selection

  $("p, h2, li")
       │
       ├── All <p> tags  → font-size: 18px
       ├── All <h2> tags → font-size: 18px
       └── All <li> tags → font-size: 18px

Element Selector with Events

You can attach events to all elements of a type at once. This is one of the biggest advantages of element selectors.

$(document).ready(function() {
    $("button").click(function() {
        alert("A button was clicked!");
    });
});

This code attaches a click event to every button on the page. When any button is clicked, the alert fires.

Nested Element Selection

Element selectors also pick up nested elements. If you have <li> inside two different <ul> lists, $("li") selects all of them.

HTML:
<ul>
  <li>Apple</li>
  <li>Banana</li>
</ul>
<ul>
  <li>Red</li>
  <li>Blue</li>
</ul>

jQuery:
$("li").css("color", "green");

Result: All four list items turn green.

Element Selector vs Other Selectors

Common Mistake — Forgetting Quotes

The tag name must always be inside quotes. Without quotes, jQuery throws an error.

Wrong:   $(p).hide();       → Error
Correct: $("p").hide();     → Works

Performance Tip

Selecting by element type is slower than selecting by ID. If you need to select one specific element, always prefer the ID selector. Use element selectors when you genuinely want to target all elements of a type.

Quick Summary

• Element selector uses tag name inside quotes: $("tagname").
• It selects every matching element on the page.
• You can select multiple types at once using commas.
• It works with all jQuery methods like .hide(), .css(), .click().
• Always use quotes around the tag name.