jQuery Class Selector

In jquery, we can use the class attribute of HTML elements as a selector. The class selector selects all elements of the matched class.

Syntax of class selector

$(".classname") 

Here, the classname is the class of the elements to select. The classname is the required field.

Example

<div class="main">
<p class="para">Hey John!</p>
<p class="ques">
What are you doing these days?
</p>
</div>

<script>
$(document).ready(function(){
$(".main").css("background", "#ffffe0");
$(".para").css("color", "blue");
$(".ques").css("color", "pink");
});
</script>

Output of the above code

In the above example, $(".main") selects all the elements with class name 'main' and sets the background color. Similarly, $(".para") sets the font color to blue to all the elements with class name 'para'.

jQuery Multiple Classes Selector

If we want the same jQuery effect on multiple classes, we can do this easily. To select multiple classes, just listed classes with separated by a comma.

Syntax of multiple classes selector

$(".classname1, .classname2, .classname3")

Example

<div>
<p class="cls1">Hey John!</p>
<p class="cls2">Good Morning</p>
<p class="cls3">
What are you doing these days?
</p>
</div>

<script>
$(document).ready(function(){
	$(".cls1, .cls2, .cls3").css("color", "red");
});
</script>

Output of the above code