How to select multiple elements using jQuery ?

Last Updated : 16 May, 2023

In this article, we will learn how to select multiple elements using JQuery. JQuery is the fastest and most lightweight JavaScript library that is used to simplify the interactions between an HTML /CSS document, or more precisely the Document Object Model (DOM), and JavaScript. JQuery is widely famous for its motto of “Write less, do more.” It simply means that you can achieve your goal by just writing a few lines of code.

Approach: We can select as many classes as we want using ‘$’ to select classes. If you wish you can specify any number of selectors to combine into a single result. This multiple-expression combinator is an efficient way to select dissimilar elements and the order of the DOM elements in the returned jQuery object may not be identical, as they will be in document order.

Syntax:

$( "classOne, classTwo, classThree" )
      .css( "property name", "value" );

Example: In this example, we are using the above-explained approach.

HTML

<!doctype html>
<html lang="en">
<head>
    <style>
        div,
        span,
        p {
            width: 126px;
            height: 60px;
            float: left;
            padding: 3px;
            margin: 2px;
            background-color: #eee;
            font-size: 14px;
        }
 
        body {
            text-align: center;
        }
    </style>
    <script src=
"https://code.jquery.com/jquery-3.5.0.js">
    </script>
</head>
 
<body>
    <h1 style="color:green">
        GeeksForGeeks
    </h1>
    <div>Linux</div>
    <p class="myClass">
        Windows
    </p>
 
    <p class="notMyClass">
        Pizza
    </p>
 
    <span>MacOS</span>
    <script>
        $("div, span, p.myClass")
            .css("border", "5px solid green");
    </script>
</body>
</html>