Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

How to select elements by data attribute using CSS?

  • Last Updated : 06 Mar, 2019

CSS allows to select HTML elements that have specific attributes or attribute values. Element can be selected in number of ways. Some examples are given below:

  • [attribute]: It selects the element with specified attribute.
  • [attribute=”value”]: It selects the elements with a specified attribute and value.
  • [attribute~=”value”]: It selects the elements with an attribute value which contains a specified word.
  • [attribute|=”value”]: It selects the elements with the specified attribute which starts with the specified value.
  • [attribute^=”value”]: It selects the elements in which attribute value begins with a specified value.
  • [attribute$=”value”]: It selects the elements in which attribute value ends with a specified value.
  • [attribute*=”value”]: It selects the elements in which attribute value contains a specified value.

Example 1: This example changes the background-color of <a> element by selecting the element [target] using CSS.




<!DOCTYPE html> 
<html
  
<head
    <title
        Attribute selector in CSS
    </title>
      
    <style>
        a[target] {
            background-color: yellow;
        }
        a {
            font-size: 20px;
        }
    </style>
</head
      
<body style = "text-align:center;"
  
    <h1 style = "color:green;"
        GeeksForGeeks 
    </h1
      
    <a href="https://www.geeksforgeeks.org" target="_blank">
        geeksforgeeks.org
    </a>
      
    <br><br>
      
    <a href="https://www.google.com" >
        google.com
    </a
</body
  
</html>                    

Output:

Example 2: This example changes the background-color and text-color of the <a> element by selecting element having [target = “_top”] using CSS.




<!DOCTYPE html> 
<html
  
<head
    <title
        Attribute selector in CSS
    </title>
      
    <style>
        a[target=_top] {
            background-color: green;
            color: white;
        }
        a {
            font-size: 20px;
        }
    </style>
</head
          
<body style = "text-align:center;"
      
    <h1 style = "color:green;"
        GeeksForGeeks 
    </h1
      
    <a href="https://www.geeksforgeeks.org" target="_top" >
        geeksforgeeks.org
    </a>
      
    <br><br>
      
    <a href="https://www.google.com" >
        google.com
    </a
</body
  
</html>                    

Output:

Example 3: This example changes the background-color and text-color of the <p> element by selecting element having [class^=”top”] using CSS.




<!DOCTYPE html> 
<html
  
<head
    <title
        Attribute selector in CSS
    </title>
      
    <style>
        [class^="top"] {
            background-color: green;
            color: white;
        }
        p {
            font-size: 20px;
        }
    </style>
</head>     
  
<body style = "text-align:center;"
  
    <h1 style = "color:green;"
        GeeksForGeeks 
    </h1
      
    <p class="top-p">A computer science portal</p>
    <p class="topPara">Attribute Selector Example</p>
    <p class="Para">CSS does not applies here</p
</body
  
</html>                    

Output:




My Personal Notes arrow_drop_up
Recommended Articles
Page :