jQuery addClass() Method

What Is addClass()?

.addClass(className) adds one or more CSS class names to each matched element (since jQuery 1.0). It updates the class attribute so stylesheet rules apply — without touching HTML text or inline styles.

$("p").addClass("selected")
$("p").addClass("selected highlight")     // multiple (space)
$("p").addClass(["selected", "highlight"]) // array (3.3+)

// Does NOT replace — only appends missing names

How to Use addClass()

Select elements, pass class names, then chain more jQuery if needed.

1. Select the element(s) with a jQuery selector.
2. Call .addClass("name") — or a space-separated list / array.
3. Optional: use a function when each element needs a different class.
4. Chain freely — .addClass() returns the same jQuery object.

Pseudocode

for each matched element:
    names = resolve argument (string | array | function)
    for each class in names:
        if element does not already have that class:
            append it to the class attribute

// Official idea:
$("p").last().addClass("selected")
// last <p> gains "selected"; other classes stay

Cheat Sheet

Keep these facts handy while styling with classes.

Live Preview

Pick a class string and run .addClass() on a sample paragraph. The result shows the updated class attribute.

Hello

class before: "card"
$("p").addClass("selected")
class after:  "card selected"

jQuery Examples

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

// <p>Hello</p><p>and</p><p>Goodbye</p>
$("p").last().addClass("selected");
console.log($("p").last().attr("class")); // "selected"

selected

// <p>Hello</p><p>Goodbye</p>
$("p").last().addClass("selected highlight");
console.log($("p").last().attr("class")); // "selected highlight"

selected highlight

// <p>Hello</p><p>Goodbye</p>
$("p").last().addClass(["selected", "highlight"]);
console.log($("p").last().attr("class")); // "selected highlight"

selected highlight

// <ul><li>Alpha</li><li>Beta</li><li>Gamma</li></ul>
$("ul li").addClass(function (index) {
  return "item-" + index;
});
console.log($("ul li").map(function () {
  return $(this).attr("class");
}).get().join(", "));
// "item-0, item-1, item-2"

item-0, item-1, item-2

Performance Notes

Prefer classes over many inline .css() calls — the browser can reuse stylesheet rules, and your JS stays shorter.

Key Takeaways