jQuery Class Selector

The class selector targets HTML elements that share the same class attribute. Unlike the ID selector that targets one element, the class selector targets a group of elements. It is one of the most commonly used selectors in jQuery.

What is a Class Selector?

In HTML, the class attribute groups elements together. Many elements can share the same class. The jQuery class selector uses a dot (.) followed by the class name to select all elements in that group.

Syntax

$(".className")

Examples:
$(".highlight")  → selects all elements with class="highlight"
$(".card")       → selects all elements with class="card"
$(".btn")        → selects all elements with class="btn"

Diagram: Class Selector in Action

  HTML Page:
  ┌──────────────────────────────────────────────┐
  │  <p class="highlight">Apple</p>              │  ← Selected ✓
  │  <p>Banana</p>                               │  ← NOT selected
  │  <div class="highlight">Cherry</div>         │  ← Selected ✓
  │  <span class="highlight">Mango</span>        │  ← Selected ✓
  └──────────────────────────────────────────────┘

  $(".highlight").css("background", "yellow");
  → Apple, Cherry, and Mango get yellow background
  → Banana stays unchanged (no class="highlight")

Real-Life Analogy

Think of a class like wearing a school uniform. All students wearing the blue uniform belong to Team Blue. The class selector says: "Find everyone wearing the blue uniform and do something with all of them at once."

Basic Example

HTML:
<p class="note">First note</p>
<p class="note">Second note</p>
<p>Not a note</p>
<button id="hideNotes">Hide Notes</button>

jQuery:
$(document).ready(function() {
    $("#hideNotes").click(function() {
        $(".note").hide();
    });
});

Clicking the button hides both note paragraphs at once. The plain paragraph stays visible.

One Element with Multiple Classes

An HTML element can have more than one class. You separate class names with a space in the HTML attribute.

HTML:
<div class="box active featured">Product Card</div>

This element has three classes: box, active, featured

jQuery can select it using any of its classes:
$(".box")       → selects it
$(".active")    → selects it
$(".featured")  → selects it

Combining Class Selector with Element Selector

You can make the class selector more specific by combining it with a tag name. This selects only elements of a specific type that also have a specific class.

$("p.highlight")    → only <p> tags with class="highlight"
$("div.card")       → only <div> tags with class="card"
$("button.primary") → only <button> tags with class="primary"

Diagram: Specific vs General Class Selection

  HTML:
  <p class="red">Text 1</p>
  <div class="red">Box 1</div>
  <span class="red">Span 1</span>

  $(".red")       → selects p, div, and span  (all 3)
  $("p.red")      → selects only the p tag    (only 1)

Selecting Multiple Classes at Once

You can select elements from multiple classes together using a comma.

$(".warning, .error").css("color", "red");

All elements with class warning or class error get red text.

Practical Use: Toggle Active Menu Item

HTML:
<ul>
  <li class="menu-item">Home</li>
  <li class="menu-item">About</li>
  <li class="menu-item">Contact</li>
</ul>

jQuery:
$(document).ready(function() {
    $(".menu-item").click(function() {
        $(".menu-item").removeClass("active");
        $(this).addClass("active");
    });
});

Clicking any menu item removes the active state from all items and adds it only to the clicked one.

Class Selector vs ID Selector

Common Mistakes

• Missing the dot: $("highlight") looks for a tag named highlight. Use $(".highlight").
• Space inside the selector: $(".my class") means element with class "my" that is also a descendant with class "class". To target elements with a single class containing a space, that is not valid HTML. Keep class names one word.
• Case sensitivity: .Box and .box are different classes.

Quick Summary

• Class selector uses a dot followed by the class name: $(".className").
• It selects all elements that share the same class attribute.
• Multiple elements can have the same class — unlike ID.
• Combine with a tag name for more specific selection: $("p.note").
• Use class selectors when you want to apply the same action to a group of elements.