How to modify CSS class using jQuery library ?
Last Updated :
23 Jul, 2025
In this article, we will discuss how to modify the css class using jQuery. This is one of the major applications of jQuery. We generally use it when we have to add a dynamic style of the particular element of the HTML. For example, changing the color of particular class content dynamically.
Approach: We will use addclass(), css(), and some other methods of the jQuery library for modifying the CSS of the elements of HTML. Let's understand this application using the below examples.
Example 1: In this below example, we are modifying class (".gfg_class") using jQuery.
HTML
<!DOCTYPE HTML>
<html lang='en'>
<head>
<meta charset='utf-8'>
<title>JQuery Examples</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
<style>
.gfg_class {
color: green;
}
</style>
<script>
$(() => {
// Updating the .gfg_class font
$("#button1").click(function () {
$(".gfg_class").css("font-size", "24pt");
});
// Adding border property to the span selector
$("#button2").click(function () {
$("span").css("border", "1px solid green");
});
// Setting background color attribute in class (#gfg_id)
$("#button3").click(function () {
$("#gfg_id").css("background", "green");
});
});
</script>
</head>
<body>
<input type="button"
id="button1"
value='button1' />
Updating the .gfg_class font<br>
<input type="button"
id="button2"
value='button2' />
Adding border property to the span selector<br>
<input type="button"
id="button3"
value='button3' />
Setting background color attribute in class (#gfg_id)
<br><br><br>
<span class='gfg_class'>
Hello this is GFG...
</span>
<br>
<span>is</span><br>
<span id='gfg_id'>Great</span>
<br>
<span class='gfg_class'>
Hey,GFG you are great..
</span>
<br>
</body>
</html>
Output: Run the above code by creating a .html file using a text editor.
Example 2: In this example, you get to know "how to add a class in a division? ", and some of its properties for proper understanding follow comments and compare with the below output.
HTML
<!DOCTYPE HTML>
<html lang='en'>
<head>
<meta charset='utf-8'>
<title>JQuery Examples</title>
<style>
.gfg_class_1 {
color: green;
font-style: italic;
}
.gfg_class_2 {
color: red;
}
.gfg_class_3 {
font-size: 40pt;
}
.gfg_class_4 {
font-size: 12pt;
}
</style>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
<script>
$(() => {
// adding class in div having 'id=someSection'
$("#button1").click(function () {
$("#someSection > div").addClass("gfg_class_1");
});
$("#button2").click(function () {
$("#someSection div:not('.gfg_class_1')")
.addClass("gfg_class_2");
});
// Div ahving class gfg_class_1 and
// gfg_class_3 by below line
$("#button3").click(function () {
$("#someSection div.gfg_class_1")
.addClass("gfg_class_3");
});
$("#button4").click(function () {
$("#someSection div.gfg_class_2")
.addClass("gfg_class_4");
});
});
</script>
</head>
<body>
<input type="button" id="button1" value='button1' />
step : 1 adding class in div having 'id=someSection'
<br>
<input type="button" id="button2" value='button2' />
step : 2 the class gfg_class_2 will added in the div 2 and div 4
where the effect of class gfg_class_1 is consider secondary.
<br>
<input type="button" id="button3" value='button3' />
step : 3 div having primary class gfg_class_1 (div 1 and div 3)
also get gfg_class_3 by below line.
<br>
<input type="button" id="button4" value='button4' />
step : 4 div having primary class gfg_class_2 (div 2 and div 4)
also get gfg_class_4 by below line
<br><br><br>
<div id='someSection'>
<div>
Hello,this is GFG.....
<div>
How can I help you ????
</div>
</div>
<div>
Okay ,so you want to code...
<div>
Let's begin....
</div>
</div>
</div>
</body>
</html>
Output: Run the above code by creating a .html file using a text editor.
Example 3: In this example you get to know "how to add class in the table?, and "How to set different types of styling in a different block, row, and column of a table? for proper understanding follow comments and compare with the below output.
HTML
<!DOCTYPE HTML>
<html lang='en'>
<head>
<meta charset='utf-8'>
<title>JQuery Examples</title>
<style>
.tbl {
border: 1px solid black;
border-collapse: collapse;
}
</style>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
<script>
$(() => {
// Adding class tbl in table
$("table").addClass("tbl");
$("table th").addClass("tbl");
$("table td").addClass("tbl");
// Setting the table head background and border
$("#button1").click(function () {
$("table thead").css("background", "gray");
$("table thead").css("color", "white");
});
// Setting the head partition line in white color
$("#button2").click(function () {
$("table th:nth-child(2)")
.css("border-right", "1px solid white");
$("table th:nth-child(1)")
.css("border-right", "1px solid white");
});
// Setting alternative background color (on even position)
$("#button3").click(function () {
$("table tbody tr").filter(":even")
.css("background", "lightgray");
});
// Text of column containing '2756' will get blue color
$("#button3").click(function () {
$("table tbody td:contains('2756')")
.css("color", "blue");
});
// Text of next column containing 'Sam' will get blue color
$("#button4").click(function () {
$("table tbody td:contains('Sam')")
.next().css("color", "brown");
});
// Text of all column next to the block containing
// '6.' will get yellow color
$("#button5").click(function () {
$("table tbody td:contains('6.')")
.nextAll().css("color", "yellow");
});
// Text of row which containing '8.' will get pink color
$("#button6").click(function () {
$("table tbody td:contains('8.')")
.nextAll().addBack().css("color", "pink");
})
// Text of row which containing '8.' will get bold
$("#button7").click(function () {
$("table tbody td:contains('Son')")
.parent().css("font-weight", "bold");
});
// Child element of column containing '2756' will get bold
$("#button8").click(function () {
$("table tbody td:contains('2756')")
.children().css("font-weight", "bold");
});
});
</script>
</head>
<body>
<input type="button"
id="button1"
value='button1' />
setting the table head background and border
<br>
<input type="button"
id="button2"
value='button2' />
setting the head partition line in white color
<br>
<input type="button"
id="button3"
value='button3' />
text of column containing '2756' will get blue color
<br>
<input type="button"
id="button4"
value='button4' />
text of next column containing 'Sam' will get blue color
<br>
<input type="button"
id="button5"
value='button5' />
text of all column next to the block containing '6.'
will get yellow color
<br>
<input type="button"
id="button6"
value='button6' />
text of row which containing '8.' will get pink color
<br>
<input type="button"
id="button7"
value='button7' />
text of row which containing '8.' will get bold
<br>
<input type="button"
id="button8"
value='button8' />
child element of column containing '2756' will get bold
<br><br><br>
<h1>GFG rating table</h1>
<table>
<thead>
<tr>
<th>S.No.</th>
<th>Name</th>
<th>GFG rating</th>
</tr>
</thead>
<tbody>
<tr>
<td>1.</td>
<td>Jhon</td>
<td>2152</td>
</tr>
<tr>
<td>2.</td>
<td>Sam</td>
<td>1235</td>
</tr>
<tr>
<td>3.</td>
<td>Tom</td>
<td>960</td>
</tr>
<tr>
<td>4.</td>
<td>Roy</td>
<td>2756<span>(leader)</span> </td>
</tr>
<tr>
<td>5.</td>
<td>Bob</td>
<td>1456</td>
</tr>
<tr>
<td>6.</td>
<td>Simmy</td>
<td>352</td>
</tr>
<tr>
<td>7.</td>
<td>Son</td>
<td>965</td>
</tr>
<tr>
<td>8.</td>
<td>Ron</td>
<td>1745</td>
</tr>
</tbody>
</table>
</body>
</html>
Output: Run the above code by creating a .html file using a text editor.
Similar Reads
jQuery Tutorial jQuery is a lightweight JavaScript library that simplifies the HTML DOM manipulating, event handling, and creating dynamic web experiences. The main purpose of jQuery is to simplify the usage of JavaScript on websites. jQuery achieves this by providing concise, single-line methods for complex JavaSc
8 min read
Getting Started with jQuery jQuery is a fast lightweight, and feature-rich JavaScript library that simplifies many common tasks in web development. It was created by John Resign and first released in 2006. It makes it easier to manipulate HTML documents, handle events, create animations, and interact with DOM(Document Object M
4 min read
jQuery Introduction jQuery is an open-source JavaScript library that simplifies the interactions between an HTML/CSS document, or more precisely the Document Object Model (DOM). jQuery simplifies HTML document traversing and manipulation, browser event handling, DOM animations, Ajax interactions, and cross-browser Java
7 min read
jQuery Syntax The jQuery syntax is essential for leveraging its full potential in your web projects. It is used to select elements in HTML and perform actions on those elements.jQuery Syntax$(selector).action()Where - $ - It the the shorthand for jQuery function.(selector) - It defines the HTML element that you w
2 min read
jQuery CDN A Content Delivery Network (CDN) is a system of distributed servers that deliver web content to users based on their geographic location. Including the jQuery CDN in your project can improve the performance, enhance reliability, and simplify maintenance.What is a jQuery CDN?A jQuery CDN is a service
4 min read
jQuery Selectors
JQuery SelectorsWhat is a jQuery Selector?jQuery selectors are functions that allow you to target and select HTML elements in the DOM based on element names, IDs, classes, attributes, and more, facilitating manipulation and interaction. Syntax: $(" ")Note: jQuery selector starts with the dollar sign $, and you encl
5 min read
jQuery * SelectorThe jQuery * selector selects all the elements in the document, including HTML, body, and head. If the * selector is used together with another element then it selects all child elements within the element used. Syntax: $("*")Parameters: *: This parameter is used to select all elements.Example 1: Se
1 min read
jQuery #id SelectorjQuery is an open-source JavaScript library that simplifies the interactions between an HTML/CSS document, or more precisely the Document Object Model (DOM), and JavaScript. Elaborating on the terms, it simplifies HTML document traversing and manipulation, browser event handling, DOM animations, Aja
1 min read
jQuery .class SelectorThe jQuery .class selector specifies the class for an element to be selected. It should not begin with a number. It gives styling to several HTML elements. Syntax: $(".class") Parameter: class: This parameter is required to specify the class of the elements to be selected.Example 1: In this example,
1 min read
jQuery Events
jQuery Effects
jQuery HTML/CSS
jQuery Traversing