CSS [attribute|=value] Selector (original) (raw)

Last Updated : 29 Aug, 2024

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 `

CSS|[attribute|=value] Selector 
<!-- CSS property -->
<style>
    [class|=Geeks] {
        background-color: green;
        border: 5px solid green;
    }
</style>
<!-- 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>

`

**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 `

CSS|[attribute|=value] Selector 
<!-- CSS property -->
<style>
    [id|=Geeks] {
        background-color: green;
        border: 5px solid green;
    }
</style>
<!-- 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>

`

**Output:

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