Open In App

CSS [attribute|=value] Selector

Improve
Improve
Like Article
Like
Save
Share
Report

The [attribute|=value] selector is used to select those elements whose attribute value is equal to “value” or whose attribute value started with “value” immediately followed by a hyphen (-).

Note: Use <!DOCTYPE> to run [attribute|=value] selector in IE8 or earlier versions.

Syntax:

[attributeType|=value] {
    // CSS Property
}

Example 1: In this example, The CSS selector [class|=Geeks] targets elements with a class attribute that starts with “Geeks” and applies green background color and green border.

html




<!DOCTYPE html>
<html>
 
<head>
    <title>
        CSS|[attribute|=value] Selector
    </title>
 
    <!-- CSS property -->
    <style>
        [class|=Geeks] {
            background-color: green;
            border: 5px solid green;
        }
    </style>
</head>
 
<body style="text-align: center;">
 
    <!-- CSS property apply here -->
    <h1 class="Geeks">
        GeeksforGeeks
    </h1>
 
    <h3 class="GeeksforGeeks">
        A computer science portal
    </h3>
 
    <!-- CSS property apply here -->
    <h2 class="Geeks-portal">
        CSS [attribute|=value] Selector
    </h2>
 
</body>
 
</html>


Output:

Example 2: In this example, The CSS selector [id|=Geeks] targets elements with an id attribute that starts with “Geeks” and applies green background color and green border.

html




<!DOCTYPE html>
<html>
 
<head>
    <title>
        CSS|[attribute|=value] Selector
    </title>
 
    <!-- CSS property -->
    <style>
        [id|=Geeks] {
            background-color: green;
            border: 5px solid green;
        }
    </style>
</head>
 
<body style="text-align: center;">
 
    <!-- CSS property apply here -->
    <h1 id="Geeks">
        GeeksforGeeks
    </h1>
 
    <h3 id="GeeksClasses">
        A computer science portal
    </h3>
 
    <!-- CSS property apply here -->
    <h2 id="Geeks-portal">
        CSS [attribute|=value] Selector
    </h2>
 
</body>
 
</html>


Output:

Supported Browsers: The browser supported by [attribute|=value] selector are listed below:

  • Google Chrome 4.0
  • Internet Explore 7.0
  • Firefox 2.0
  • Apple Safari 3.1
  • Opera 9.6


Last Updated : 04 Jul, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads