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 contains a specified word. The “value” must be present in the attribute as a separate word and not as part of the other word i.e. if [title~=Geeks] is specified then all elements with Geeks title get selected.

Syntax:

[attribute~=value] {
    // CSS property
}

Example 1: In this example, The CSS selector [class~=”Geeks”] targets elements with a class attribute containing the word “Geeks” and applies green background color and white text color.

html




<!DOCTYPE html>
<html>
 
<head>
    <style>
        [class~="Geeks"] {
            background: green;
            color: white;
        }
    </style>
</head>
 
<body style="text-align:center;">
 
    <div class="Geeks Class">
        First div Element
    </div>
 
    <div class="GeeksforGeeks">
        Second div Element
    </div>
 
    <div class="My Geeks">
        Third div Element
    </div>
 
    <div class="MyGeeks">
        Fourth div Element
    </div>
</body>
 
</html>


Output:

Example 2: In this example, The CSS selector [class~=Geeks] targets elements with a class attribute that contains the word “Geeks” and applies a blue solid border.

html




<!DOCTYPE html>
<html>
 
<head>
    <title>
        CSS [attribute~=value] Selector
    </title>
 
    <style>
        [class~=Geeks] {
            border: 5px solid blue;
        }
    </style>
</head>
 
<body>
    <h2 style="text-align:center">
        [attribute~=value] Selector
    </h2>
 
    <img src=
         class="Geeks Class"
         alt="gfg">
 
    <img src=
         class="Geeks"
         alt="geeks">
 
    <img src=
         class="GeeksforGeeks"
         alt="gfg">
</body>
 
</html>


Output:

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

  • Google Chrome 4.0
  • Internet Explorer 7.0
  • Firefox 2.0
  • 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