How to select elements by data attribute using CSS? - GeeksforGeeks

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:
CSS-Selectors
Picked
CSS
Web Technologies
Web technologies Questions
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Design a web page using HTML and CSS
Form validation using jQuery
How to set space between the flexbox ?
Search Bar using HTML, CSS and JavaScript
How to Create Time-Table schedule using HTML ?
Roadmap to Become a Web Developer in 2022
Installation of Node.js on Linux
How to fetch data from an API in ReactJS ?
Convert a string to an integer in JavaScript
Difference between var, let and const keywords in JavaScript