Skip to content
Related Articles

Related Articles

Improve Article

jQuery | [attribute|=value] Selector

  • Last Updated : 15 Sep, 2021

The [attribute|=value] selector is used to select each element with a specific attribute, with a specific string value (like “geeks”) or starting string followed by a hyphen (like “geeks-forgeeks”).
 

Syntax:  

$("[attribute|='value']")

Parameter :  

  • attribute : This parameter is required to specify the attribute to be searched.
  • value : This parameter is required to specify the string the attribute value should start with.

Example-1: 

html




<!DOCTYPE html>
<html>
 
<head>
    <script src=
  </script>
  
  <script>
        $(document).ready(function() {
            $("p[title|='GeeksForGeeks']").css(
              "background-color", "green");
        });
    </script>
</head>
 
<body>
    <center>
        <h1>Geeks For Geeks</h1>
        <p title="GeeksForGeeks">
          Geeks1
      </p>
 
 
       
        <p title="google">
          Geeks2
      </p>
 
 
       
        <p title="Tom">
          Geeks3
      </p>
 
 
       
        <p title="See You GeeksForGeeks">
          Geeks4
      </p>
 
 
       
        <p title=
      "GeeksForGeeks-is the best place to learn">
          Geeks5
      </p>
 
 
    </center>
 
</body>
 
</html>

Output: 
 



Example-2: 

html




<!DOCTYPE html>
<html>
 
<head>
    <script src=
  </script>
  
  <script>
        $(document).ready(function() {
            $("p[title|='google']").css(
              "background-color", "green");
        });
    </script>
</head>
 
<body>
    <center>
        <h1>Geeks For Geeks</h1>
        <p title="GeeksForGeeks">
          Geeks1
      </p>
 
 
       
        <p title="google">
          Geeks2
      </p>
 
 
       
        <p title="google- tom">
          Geeks3
      </p>
 
 
       
        <p title="See You GeeksForGeeks">
          Geeks4
      </p>
 
 
       
        <p title=
       "GeeksForGeeks-is the best place to learn">
          Geeks5
      </p>
 
 
    </center>
 
</body>
 
</html>

Output: 
 

 




My Personal Notes arrow_drop_up