Example 1 — Add Class to Last Paragraph
Official jQuery demo: highlight the last p with class selected.
jQuery
$("p").last().addClass("selected");jQuery CSS Methods
Overview
What You’ll Learn
jQuery CSS methods let you change how elements look — add reusable classes with .addClass(), set inline properties with .css(), and read dimensions. This hub links to 17 CSS method tutorials with try-it labs and FAQs.
.addClass()
Append classes
Classes vs CSS
Stylesheet vs inline
Multiple
String or array
Callback
Dynamic names
Switch states
remove + add
17 guides
Full index
Fundamentals
Introduction
Styling in jQuery usually means one of two things: toggling CSS classes defined in your stylesheet, or setting inline style properties directly on elements. Class-based styling keeps presentation in CSS files where it belongs; inline styles are handy for computed values at runtime.
What Are jQuery CSS Methods?
The CSS category covers class manipulation (.addClass(), and later .removeClass(), .toggleClass()), inline styles (.css()), and size helpers (.width(), .height()). They all return a jQuery object (except getters) so you can chain further calls.
Beginner Tip
If a look already exists as a CSS rule — like .active or .error — use .addClass() instead of .css(). Your HTML stays clean and styles stay in one place.
Foundation
📝 Syntax
Minimal class-add workflow:
jQuery
$("button").addClass("active");
$("li").addClass("selected highlight");
$("div").removeClass("hidden").addClass("visible");Preview
👀 .addClass() vs .css()
Two ways to change appearance — classes reuse stylesheet rules; inline styles set properties directly:
.addClass("active") → appends class name(s) to class attribute .css("color", "red") → sets inline style property on element .removeClass().addClass() → switch from one class state to another Example: $("p").last().addClass("selected") Example: $("div").css({ width: 200, opacity: 0.5 })
CSS Method Tutorial Index
Search by method name or browse by category. Each tutorial includes syntax, try-it examples, and FAQs.
Class Attributes
4 tutorialsAdd, remove, toggle, and test CSS classes on matched elements.
| Method | Description | Tutorial |
|---|---|---|
.addClass() | Add one or more CSS classes to each matched element — string, space-separated list, array, or callback. | Open |
.hasClass() | Return true if any matched element has the given CSS class — useful for conditionals and filtering. | Open |
.removeClass() | Remove one, several, or all CSS classes from each matched element — string, array, or callback. | Open |
.toggleClass() | Add or remove CSS classes on each matched element — flip on/off or force with a boolean state. | Open |
Inline & Computed Styles
3 tutorialsRead rendered CSS values and write inline style properties on matched elements.
| Method | Description | Tutorial |
|---|---|---|
.css() | Get computed CSS properties from the first matched element or set inline styles on every matched element. | Open |
jQuery.cssHooks | Extend .css() and .animate() with custom get/set handlers for CSS properties — vendor prefixes, cssNumber, and fx.step. | Open |
jQuery.cssNumber | Unitless CSS property allowlist — controls whether .css() auto-appends px to numeric setter values (jQuery 3.x and earlier). | Open |
Dimensions
6 tutorialsRead and set element, window, and document height and width.
| Method | Description | Tutorial |
|---|---|---|
.height() | Get the content height of the first matched element as a unitless number, or set height on every matched element. | Open |
.width() | Get the content width of the first matched element as a unitless number, or set width on every matched element. | Open |
.innerHeight() | Get or set height including padding but not border — content box plus vertical padding. | Open |
.outerHeight() | Get or set height including padding and border — optionally margin with outerHeight(true). | Open |
.innerWidth() | Get or set width including padding but not border — content box plus horizontal padding. | Open |
.outerWidth() | Get or set width including padding and border — optionally margin with outerWidth(true). | Open |
Offset & Position
2 tutorialsRead document coordinates with .offset() and offset-parent coordinates with .position().
| Method | Description | Tutorial |
|---|---|---|
.offset() | Get or set the top and left coordinates of matched elements relative to the document. | Open |
.position() | Get the top and left coordinates of the first matched element relative to its offset parent. | Open |
Scroll
2 tutorialsRead and set horizontal and vertical scroll positions on overflow elements.
| Method | Description | Tutorial |
|---|---|---|
.scrollLeft() | Get or set the horizontal scroll position of matched elements as a unitless pixel number. | Open |
.scrollTop() | Get or set the vertical scroll position of matched elements as a unitless pixel number. | Open |
Hands-On
Examples Gallery
Include jQuery 3.7+ and open the Try-it links to run each snippet in the browser.
Example 2 — Add Multiple Classes at Once
Pass a space-separated string to apply two classes in one call.
jQuery
$("p").last().addClass("selected highlight");Wrap Up
Conclusion
jQuery CSS methods give you a clean API for presentation changes. Start with .addClass() when you want to reuse stylesheet rules — it appends class names without wiping existing ones.
❓ Frequently Asked Questions
CSS methods read or write presentation on matched elements — class manipulation (.addClass, .removeClass, .toggleClass), inline styles (.css), and dimensions (.width, .height). They change how elements look without replacing HTML content.
.addClass() appends one or more CSS class names to each matched element's class attribute. It does not remove or replace existing classes — new names are added alongside whatever is already there.
Prefer .addClass() when your stylesheet already defines reusable classes (.active, .error, .hidden). Use .css() for one-off inline values like dynamic pixel widths or colors computed at runtime.
Yes. Pass a space-separated string — addClass('selected highlight') — or since jQuery 3.3 an array — addClass(['selected', 'highlight']). Both add every listed class to each element.
Chain .removeClass() then .addClass(): $('p').removeClass('old').addClass('new'). For on/off toggling, .toggleClass() adds the class when missing and removes it when present.
Read the overview, study the addClass vs css comparison, try the hub examples, then open the .addClass() tutorial for full syntax, five try-it labs, and method-specific FAQs.
Did you know?
Before jQuery 1.12, .addClass() manipulated the className property. Since 1.12/2.2 it uses the class attribute, so the method works on SVG and XML documents too — not just HTML.
Start with .addClass()
Learn how to append CSS classes with string, array, and callback syntax.
About the author
6 people found this page helpful