Jquery Multiple Class Selector | Explained

Jquery multiple class selector

In this article, we will see about jquery multiple class selector. There are situations where different selectors share similar styles. To reduce code redundancy in CSS it is possible to group selectors. To create multiple selectors, we place a selector one beside another with a comma separator. i.e selectorq, selector2.

Note: The comma-separated list of CSS selectors is called a group or multiple selectors in CSS

The Syntax for CSS multiple class selector

$("classselector1, classselector2...classselectorn").action(parameter)

To the funciton, if we pass the CSS multiple class selector then it is called a multiple class selector.

Example code

<html>
<head>
<title>Adjacent Siblings</title>
<script src="./jquery-3.6.1.js" type="text/javascript"></script>
</head>
<body>
<h1 class="head1">Heading Text 1</h1>
<p>Paragraph Text 1</p>
<h1 class="head2"> Heading Text 2</h1>
<p>Paragraph Text 2</p>
<h1 class="head3"> Heading Text 3</h1>

<script type="text/javascript">

$(".head1, .head2, .head3").css("border", "2px solid red");
</script>

</body>
</html>

Output:jquery multiple class selector

In the above code, we have three h1 tags with class attributes and two p tags. In the script tag, we select the class selector. Apply a red border, so the output is displayed red border only have a classname head1, head2, and head3.

Leave a Reply