jQuery Class Selector (“.class”)

What You’ll Learn

The class selector .class matches every element that includes a given CSS class — regardless of tag name. Available since jQuery 1.0; one of the most common selectors in real projects for styling hooks, state flags, and component markup.

Introduction

CSS classes group elements for shared styling and behavior. In HTML you write class="myClass"; in jQuery you target them with $(".myClass"). Unlike ID selectors (one element per page in valid HTML), the same class can appear on many elements — making classes ideal for buttons, cards, alerts, and reusable components.

Official jQuery documentation notes that an element may carry several class names at once (class="card featured"). A single class selector matches if any one of those tokens equals your search string. jQuery also optimizes simple class queries with the browser’s native getElementsByClassName() when available.

Understanding the Class Selector

The dot prefix tells jQuery you are searching by class name, not tag or ID:

• class="myClass" on a div → matches $(".myClass").
• class="myClass" on a span → also matches — tag does not matter.
• class="box myClass highlight" → still matches $(".myClass").
• class="other" → no match for $(".myClass").

📝 Syntax

Official jQuery API form (since 1.0):

jQuery( ".class" )



// common patterns:

$( ".myClass" )

$( ".myclass.otherclass" )   // must have BOTH classes

$( "#sidebar .nav-link" )    // scoped by parent ID

$( "button.primary" )        // tag + class combined

Parameters

• class — a class name to search for (without the leading dot in HTML, with the dot in the selector string).

Return value

• A jQuery object containing every element whose class attribute includes the given class token.
• Empty collection when no elements match.

Official jQuery API — Example 1

// Finds every element with class "myClass" (div and span)

$( ".myClass" ).css( "border", "3px solid red" );

Official jQuery API — Example 2

// Element must have BOTH "myclass" AND "otherclass"

$( ".myclass.otherclass" ).css( "border", "3px solid red" );

Examples Gallery

Examples 1 and 2 follow the official jQuery API demos. Examples 3–5 cover scoped selection, counting matches, and toggling visibility by class. Use the Try-it links to run each snippet.

$( ".myClass" ).css( "border", "3px solid red" );



// div.myClass and span.myClass both match — tag name ignored

div.myClass → red border

span.myClass → red border

div.notMe → unchanged

$( ".myclass.otherclass" ).css( "border", "3px solid red" );



// No space between .myclass and .otherclass — means AND, not descendant

class="myclass otherclass" → red border

class="myclass" only → no border

class="otherclass" only → no border

$( "#panel .active" ).addClass( "highlight" );



// Only .active elements inside #panel — not #sidebar .active

#panel .active → highlight class added

#sidebar .active → unchanged

var count = $( ".tag" ).length;

$( "#tagCount" ).text( count + " tag(s) on this page" );

3 span.tag elements → "3 tag(s) on this page"

$( "#showAll" ).on( "click", function() {

  $( ".hidden" ).removeClass( "hidden" ).fadeIn();

});



// Select by class to find; .removeClass() to change state

Click "Show hidden" → all .hidden paragraphs fade in

Class selector finds; .removeClass() updates state

🚀 Common Use Cases

• Component styling — target all .card or .btn-primary elements.
• State flags — select .active, .disabled, or .loading nodes.
• Scoped tabs — $("#tabs .tab-pane.active") inside one widget.
• Validation errors — highlight every .field-error input wrapper.
• Filter chips — count or hide .tag labels dynamically.
• AND filtering — $(".product.featured") for compound class rules.

📝 Notes

• Available since jQuery 1.0 — standard CSS class selector syntax.
• An element can have multiple classes; one matching token is enough for .singleClass.
• Chained classes (.a.b) require every listed class on the same element.
• Class names are case-sensitive — match HTML exactly.
• jQuery uses getElementsByClassName() for simple class selectors when supported.
• Use .addClass(), .removeClass(), and .toggleClass() to change classes — not the selector alone.

💡 Best Practices