jQuery Class Selector with Examples

In this article, I am going to discuss jQuery Class Selector with Examples. Please read our previous article, where we discussed jQuery Element Selector. The jQuery Class Selector selects all the elements which match with the given class of the elements. At the end of this article, you will understand everything about the jQuery Class selector.

jQuery Class Selector

To select any HTML element by its class name, then we have to use the jQuery Class selector. To the jQuery function if we pass the element class name as its selector then it is called as jQuery Class selector. jQuery Class selector uses document.getElementsByClassName() function of JavaScript.

Syntax: $(‘.clsass’)

For example, suppose that if we have button element in our HTML
<button class=”btn”>Click Me</button>

To select this button element, we have the selector as follows
$(‘.btn’)

The usage of selecting the element by their Class name is exactly as same as we have used in CSS. For example

$(‘.a1’): This will select all the elements with class name a1
$(‘div.a1’): This will select all the div elements which have the class a1
$(‘.a1 .b1’): This will select all the elements having class b1 which are descendant of any element having class a1
$(‘.a1,.b1’): This will select any element having class a1 or b1
$(‘.a1.b1’): This will select any element which have the both class a1 and b1
$(‘div > .p1’): This will select elements of class p1 that are a direct child of a <div> element
$(‘.p1 ~ .p2’): This will select elements of class p2 appear after element of class p1
$(‘.p1: first-child’): This will select only the first element of class p1 of its parent
$(‘.p1: last-child’): This will select only the last element of class p1 of its parent
$(‘.p1: nth-child(3)’): This will select only the 3rd element of class p1 of its parent
$(‘.data: odd’): This will select only the odd children of element of class data
$(‘.data: even’): This will select only the even children of element of class data
$(‘.container: has(.p1)’): This will select all the elements having class container that have a element of class p1
$(‘.container: contains(“hello”)’): This will select all elements having class container that contains the string hello
$(‘.list:eq(3)’): The fourth element in a list having class list (index starts at 0)
$(‘.list:gt(3)’): Elements with class list with an index greater than 3
$(‘. list:lt(3)’): Elements with class list with an index less than 3

Note: The jQuery .class selector selects all elements with the specific class. Here, the class refers to the class attribute of an HTML element. The class attribute is used to set a particular style for several HTML elements.

Example1:

$( ‘Class selector’ ) returns a collection of elements, we can alert the number of elements also by length method.

<!DOCTYPE html>
<html>
<head>
     <title>jQuery Class Selector</title>
</head>
<body>
    <h1>jQuery Class Selector</h1>
      <div class="test">
        <p class="p1">This is 1st text having class p1</p>
        <p class="p1">This is 2nd text having class p1</p>
        <p>This is 3rd text</p>
      </div>
    <button id="demo">Click Me</button>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script> 
$(document).ready(function () {
            $('#demo').click(function () {
                alert($('.p1').length);
            });
        });
    </script>
</body>
</html>

Once you run the above code, you will get the following output.

Once you click on the Click Me button, it will give you the following alert.

Example2:

In the below example we are selecting all the elements which have the class p1 by $( ‘.p1’ ) and applying the border.

<!DOCTYPE html>
<html>
<head>
    <title>jQuery Class Selector</title>
</head>
<body>
    <h1>jQuery Class Selector</h1>
        <p class="p1">This is 1st text</p>
        <p class="p1">This is 2nd text</p>
        <p>This is 3rd text</p>
 
    <button id="demo">Click Me</button>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            $('#demo').click(function () {
                $('.p1').css('border','2px solid red');
            });
        });
    </script>
</body>
</html>

Run the above code and then click on the Click Me button and you should get the following output.

Example3:

In the below example we are selecting those div elements which have the class p1 by $( ‘div.p1’ ). Notice that p elements have also class p1 but they are not targeted at all.

<!DOCTYPE html>
<html>
<head>
    <title>jQuery Class Selector</title>
</head>
<body>
    <h1>jQuery Class Selector</h1>
    <div class="p1">
        <p class="p1">This is 1st text</p>
        <p class="p1">This is 2nd text</p>
    </div>
    <button id="demo">Click Me</button>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            $('#demo').click(function () {
                $('div.p1').css('border','2px solid red');
            });
        });
    </script>
</body>
</html>

Run the above code and then click on the Click Me button and you should get the following output.

Example4:

In the below example, notice that only those elements of class p1 are targeted which are descendants of the class test. The element of class p1 is not targeted which is outside that div of the class test.

<!DOCTYPE html>
<html>
<head>
    <title>jQuery Class Selector</title>
</head>
<body>
    <h1>jQuery Class Selector</h1>
    <div class="test">
        <p class="p1">This is 1st text</p>
        <p class="p1">This is 2nd text</p>
    </div>
    <p class="p1">This is 3rd text</p>
    <button id="demo">Click Me</button>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            $('#demo').click(function () {
                $('.test .p1').css('border','2px solid red');
            });
        });
    </script>
</body>
</html>

Run the above HTML code and then click on the Click Me button and you should get the following output.

Example5:

In the below example, we are selecting those elements which have the class either test or p1. Notice that borders have been applied to those elements having one of the class test or p1.

<!DOCTYPE html>
<html>
<head>
    <title>jQuery Class Selector</title>
</head>
<body>
    <h1>jQuery Class Selector</h1>
    <div class="test">
        <p class="p1">This is 1st text</p>
        <p class="p1">This is 2nd text</p>
        <p>This is 3rd text</p>
    </div>
    
    <button id="demo">Click Me</button>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            $('#demo').click(function () {
                $('.test, .p1').css('border','2px solid red');
            });
        });
    </script>
</body>
</html>

Run the above HTML code and then click on the Click Me button and you should get the following output.

Example6:

In the below example only, we are selecting those elements which have both the class test and p1.

<!DOCTYPE html>
<html>
<head>
    <title>jQuery Class Selector</title>
</head>
<body>
    <h1>jQuery Class Selector</h1>
    <div class="test p1">
        <p class="p1">This is 1st text</p>
        <p class="p1">This is 2nd text</p>
        <p>This is 3rd text</p>
    </div>
    <button id="demo">Click Me</button>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            $('#demo').click(function () {
                $('.test.p1').css('border','2px solid red');
            });
        });
    </script>
</body>
</html>

Run the above code and then click on the Click Me button and you should get the following output.

Example7:

In the below example, we are selecting the children of list ‘class’ which is indexed at 3, and those who are indexed at less than 3.

<!DOCTYPE html>
<html>
<head>
    <title>jQuery Class Selector</title>
</head>
<body>
    <h1>jQuery Element Selector</h1>
    <section id="sec">
        <h6>Front End Technologies</h6>
        <ul>
            <li class="list">jQuery</li>
            <li class="list">ReactJs</li>
            <li class="list">Angular</li>
            <li class="list">Bootstrap</li>
            <li>Foundation UI</li>
        </ul>
    </section>
    <button id="demo">Click me</button>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            $('#demo').click(function () {
                $('ul li:eq(3)').css('backgroundColor', 'skyblue');
                $('.list:lt(3)').css('backgroundColor', 'pink');
            });
        });
    </script>
</body>
</html>

Run the above code and then click on the Click Me button and you should get the following output.

Example8:

In the below example we are selecting those <li> elements which are not having a class ‘list’. As a result, you can see the last child is selected.

<!DOCTYPE html>
<html>
<head>
    <title>jQuery Class Selector</title>
</head>
<body>
    <h1>jQuery Element Selector</h1>
    <section id="sec">
        <h6>Front End Technologies</h6>
        <ul>
            <li class="list">jQuery</li>
            <li class="list">ReactJs</li>
            <li class="list">Angular</li>
            <li class="list">Bootstrap</li>
            <li>Foundation UI</li>
        </ul>
    </section>
    <button id="demo">Click me</button>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            $('#demo').click(function () {
                $('ul li:not(.list)').css('backgroundColor', 'skyblue');
                
            });
        });
    </script>
</body>
</html>

Run the above HTML and then click on the Click Me button and you should get the following output.

Example9:

In the below example, we are selecting the element having class ‘container’ which has the element of class ‘p1’.

<!DOCTYPE html>
<html>
<head>
    <title>jQuery Class Selector</title>
</head>
<body>
    <h1>jQuery Element Selector</h1>
    <section id="sec">
        <div class="container">
            <p class="p1">Demo text</p>
        </div>
        <div><p>Demo text 2 </p></div>
    </section>
    <button id="demo">Click me</button>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            $('#demo').click(function () {
                $('.container:has(.p1)').css('backgroundColor', 'skyblue');
                
            });
        });
    </script>
</body>
</html>

Run the above HTML and then click on the Click Me button and you should get the following output.

Example10:

In the below example, we are selecting those elements having class ‘p1’ and that contains the string “Demo”

<!DOCTYPE html>
<html>
<head>
    <title>jQuery Class Selector</title>
</head>
<body>
    <h1>jQuery Element Selector</h1>
    <section id="sec">
        <p class="p1">Demo text</p>
        <p class="p1">Dummy text</p>
        <p class="p1">Demo text</p>
    </section>
    <button id="demo">Click me</button>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            $('#demo').click(function () {
                $('.p1:contains("Demo")').css('backgroundColor' , 'skyblue') ; 
            });
        });
    </script>
</body>
</html>

Run the above HTML Code and then click on the Click Me button and you should get the following output.

In the next article, I am going to discuss jQuery Attribute Selector with Examples. Here, in this article, I try to explain jQuery Class Selector with Examples and I hope you enjoy this article.

Dot Net Tutorials

About the Author: Pranaya Rout

Pranaya Rout has published more than 3,000 articles in his 11-year career. Pranaya Rout has very good experience with Microsoft Technologies, Including C#, VB, ASP.NET MVC, ASP.NET Web API, EF, EF Core, ADO.NET, LINQ, SQL Server, MYSQL, Oracle, ASP.NET Core, Cloud Computing, Microservices, Design Patterns and still learning new technologies.