CSS [attribute=value] Selector

Last Updated : 04 Jul, 2023

The [attribute=value] selector in CSS is used to select those elements whose attribute value is equal to “value”.

Syntax:

element [attribute = "value"] {
    // CSS Property
}

Note: <!DOCTYPE> must be declared for IE8 and earlier versions.

Example 1: In this example, The selector h1[id=”geeks”] targets the h1 element with id=”geeks” and applies a green background color and white text color and The selector li[class=”gfg”] targets li elements with class=”gfg” and sets the text color to green.

html

<!DOCTYPE html>
<html>
 
<head>
    <!-- CSS property used here -->
    <style>
        h1[id="geeks"] {
            background-color: green;
            color: white;
        }
 
        li[class="gfg"] {
            color: green;
        }
    </style>
</head>
 
<body>
    <h1 id="geeks">GeeksforGeeks</h1>
    <ul>
        <li class="gfg">Data Structure</li>
        <li class="geeks">Algorithm</li>
        <li class="gfg">DBMS</li>
        <li class="geeks">C++ programming</li>
    </ul>
 
</body>
 
</html>

Output:

Example 2: In this example, The CSS selector p[this=Geeks] targets <p> elements with this=”Geeks” attribute value and applies green background color and white text color.

html

<!DOCTYPE html>
<html>
 
<head>
    <title>
        CSS [attribute=value] Selector
    </title>
 
    <!-- CSS property -->
    <style>
        p[this=Geeks] {
            background-color: green;
            color: white;
        }
    </style>
</head>
 
<body>
    <h2>[attribute=value] Selector</h2>
    <p this="Geeks">Paragraph 1</p>
 
    <p this="geeks">Paragraph 2</p>
 
    <p this="Geeks">Paragraph 2</p>
 
</body>
 
</html>