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
Hey John!
What are you doing these days?
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
Hey John!
Good Morning
What are you doing these days?