How to use OR Operation in jQuery Attribute Selectors ?

Last Updated : 02 Sep, 2022

In this article, we will see how to use OR operation in jQuery Attribute Selectors. To use the OR operation in the attribute selector, we will use the comma operator (,) on attributes or attribute values.

Syntax:

$(".class1, .class2, ...") {
    // Code
}

Approach: First we will create some HTML div elements with their class names and then use the comma operator (OR operation) to select multiple attributes or attribute values (classes).

Example 1: In this example, we will use OR operation to select and add CSS styles using jQuery.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content= 
        "width=device-width, initial-scale=1.0"> 
    <script src= 
        "https://code.jquery.com/jquery-3.5.0.js"> 
    </script> 
      
    <title> 
        How to use OR Operation in 
        jQuery Attribute Selectors? 
    </title> 
  
    <style> 
        body { 
            text-align: center; 
        } 
  
        h1 { 
            color: green; 
        } 
    </style> 
</head> 
  
<body> 
    <h1>GeeksforGeeks</h1> 
  
    <h3> 
        How to use OR Operation in 
        jQuery Attribute Selectors? 
    </h3> 
  
    <div class="GFG"> 
        <div class="GFG1">Web Technology</div> 
        <div class="GFG3">C Programming</div> 
        <div class="GFG2">JavaScript</div> 
        <div class="GFG3">Java Programming</div> 
        <div class="GFG1">Angular.js</div> 
        <div class="GFG4">Computer Network</div> 
    </div> 
  
    <script> 
        $(document).ready(function () { 
            $('.GFG1, .GFG2').css({ 
                "background": "green", 
                "color": "white", 
                "width": "350px", 
                "margin": "auto" 
            }); 
  
            $('.GFG3, .GFG4').css({ 
                "background": "red", 
                "color": "white", 
                "width": "350px", 
                "margin": "auto" 
            }); 
        }); 
    </script> 
</body> 
  
</html>

Output:

Example 2: In this example, we will use OR operation to select and add CSS styles on attributes using jQuery.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content= 
        "width=device-width, initial-scale=1.0"> 
    <script src= 
        "https://code.jquery.com/jquery-3.5.0.js"> 
    </script> 
  
    <title> 
        How to use OR Operation in 
        jQuery Attribute Selectors? 
    </title> 
  
    <style> 
        body { 
            text-align: center; 
        } 
  
        h1 { 
            color: green; 
        } 
    </style> 
</head> 
  
<body> 
    <h1>GeeksforGeeks</h1> 
  
    <h3> 
        How to use OR Operation in 
        jQuery Attribute Selectors? 
    </h3> 
  
    <div class="GFG"> 
        <div gfgid="GFG1">Web Technology</div> 
        <div gfgid="GFG3">C Programming</div> 
        <div gfgid="GFG2">JavaScript</div> 
        <div gfgid="GFG3">Java Programming</div> 
        <div gfgid="GFG1">Angular.js</div> 
        <div gfgid="GFG4">Computer Network</div> 
    </div> 
  
    <script> 
        $(document).ready(function () { 
            $('[gfgid="GFG1"],[gfgid="GFG2"]').css({ 
                "background": "green", 
                "color": "white", 
                "width": "350px", 
                "margin": "auto" 
            }); 
  
            $('[gfgid="GFG3"], [gfgid="GFG4"]').css({ 
                "background": "red", 
                "color": "white", 
                "width": "350px", 
                "margin": "auto" 
            }); 
        }); 
    </script> 
</body> 
  
</html>