jQuery .addClass(): Add One or More CSS Classes

jQuery Reference

.addClass() adds CSS class names to every matched element while preserving existing classes. The added class changes the appearance only if a corresponding style rule exists.

Syntax and behavior

$(".item").addClass("active");
$(".item").addClass("marked active");
$(".item").addClass(["marked", "active"]);

CSS, or Cascading Style Sheets, defines a webpage’s appearance. Do not prefix the class-name argument with a dot. Separate several names with spaces or pass an array of names. A function can receive each element’s index and current class string and return names to add. The method returns the original jQuery object, so you can chain another operation such as .attr().

The official jQuery .addClass() documentation describes additional call signatures and argument types.

Complete runnable example

Save the following code as a UTF-8 example.html file and open it in a browser. It loads the full jQuery 4.0.0 build from an external URL, so an internet connection is required. The $(function () { ... }) callback waits for the document to be ready before running the example.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery addClass example</title>
  <style>
    body { margin: 24px; font-family: sans-serif; line-height: 1.6; }
    .marked { background: #fff0b3; border: 2px solid #835b00; }
    .active { color: #a00000; font-weight: bold; }
    button, input, select { font: inherit; }
    #output { white-space: pre-wrap; overflow-wrap: anywhere; }
  </style>
  <script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
</head>
<body>
<p class="item base">First item</p>
<p class="item base">Second item</p>
  <p id="output" aria-live="polite"></p>
  <script>
    $(function () {
      $(".item").addClass("marked active");
      $("#output").text($(".item").first().attr("class"));
    });
  </script>
</body>
</html>

Expected result

Both paragraphs receive the background, border, and red text. The output is item base marked active, showing that item and base remain. Adding the same class again does not duplicate its name.

Generating a class for each item

$(".item").addClass(function (index) {
  return "item-" + index;
});

The index starts at zero, so the first item receives item-0 and the second receives item-1. These names do not affect appearance until CSS rules target them.

Important details and troubleshooting

Use .active when selecting elements by class, but use "active" as the class-name argument. .addClass(".active") does not add the intended active class.
If the class appears in the DOM but the appearance does not change, check the CSS rule, its priority, and any existing inline styles. Adding a class does not create a new style rule.
Adding a class alone will not clear a previous highlight when a condition becomes false. Use .removeClass() or .toggleClass(name, condition) to handle both states.

Compare the behavior with .removeClass() and class removal, .toggleClass() and explicit state.

jQuery Reference

jQuery .addClass(): Add One or More CSS Classes

Add one or more classes while preserving existing names, generate classes with a callback, and check why styling may not change.

jQuery .add(): Combine Element Selections

Combine selections without changing the original collection, and distinguish selecting elements from inserting them into the document.

jQuery :button Selector: Which Elements Does It Match?

Check how :button treats button elements, ordinary button inputs, and submit or reset inputs, with a working selection example.

jQuery :contains(): Match Elements by Text Content

Explore case-sensitive substring matching, descendant text, and a safer way to handle dynamic search strings without constructing selectors.

jQuery .addBack(): Include the Previous Traversal Selection

Include the previous traversal collection and understand which elements the optional selector filters.

jQuery .append(): Insert Content as the Last Child

Add content at the end of an element, compare insertion with moving or cloning nodes, and handle user input as plain text.

jQuery .prepend(): Insert Content as the First Child

Add content at the beginning of an element and understand how existing nodes and multiple destinations affect the result.