jQuery Class Selector

What Is .class?

The class selector $(".class") (since jQuery 1.0) selects every element whose class attribute includes that name. An element can have many classes — only one must match. It is a standard CSS selector; jQuery uses native getElementsByClassName() when available.

$(".myClass")              // any tag with class myClass
$("div.myClass")           // only divs with that class
$(".myclass.otherclass")   // both classes required (no space!)
$(".a .b")                 // .b inside .a (descendant)

// Change classes with .addClass() / .removeClass()
// Test with .hasClass("myClass")

How to Use .class

Put a dot before the class name, then optionally narrow by tag or parent.

1. Write $(".className") with the exact casing from your HTML.
2. Prefix with a tag when you only want certain elements: $("span.myClass").
3. Chain classes with no space for AND: $(".card.featured").
4. Scope under a parent when the page is large: $("#panel .item").
5. To change classes, use .addClass() / .removeClass() — the selector only finds.

Pseudocode

matches = []
for each element in document (or context):
    classList = element.class attribute split by spaces
    if targetClass is in classList:
        matches.add(element)

return matches

// $(".a.b") → targetClass A AND targetClass B both in classList
// Native path: getElementsByClassName(targetClass) when possible

Cheat Sheet

Keep these facts handy while selecting by class.

Live Preview

Toggle which boxes have myClass, then run $(".myClass") and see what matches.

$(".myClass").length
→ 2

matched → #box1 (div), #box3 (span)

jQuery Examples

Short, copy-ready snippets. Open DevTools Console, or use Try It Yourself for a live editor.

var labels = [];
$(".myClass").each(function () {
  labels.push(this.tagName.toLowerCase() + "#" + (this.id || "(no-id)"));
});

$("#out").text(
  "Matched: " + $(".myClass").length + "\n" +
  labels.join(", ")
);

Matched: 2
div#(no-id), span#(no-id)

$("#out").text(
  "Only myclass: " + $(".myclass").length + "\n" +
  "Both myclass + otherclass: " + $(".myclass.otherclass").length
);

Only myclass: 2
Both myclass + otherclass: 1

$("#out").text(
  "Any .myClass: " + $(".myClass").length + "\n" +
  "Only div.myClass: " + $("div.myClass").length
);

Any .myClass: 2
Only div.myClass: 1

var n = $("#panel .item").length;
var all = $(".item").length;

$("#out").text(
  "Inside #panel: " + n + "\n" +
  "Whole page .item: " + all
);

Inside #panel: 2
Whole page .item: 3

var found = $(".active").length;
var firstIsActive = $("#card").hasClass("active");

$("#out").text(
  "$('.active') count: " + found + "\n" +
  "$('#card').hasClass('active'): " + firstIsActive
);

$('.active') count: 1
$('#card').hasClass('active'): true

Performance Notes

Official docs note that class-only selectors can use getElementsByClassName(). Keep selectors simple and scoped when class names are reused across the page.

Key Takeaways