Is there any selector for elements containing certain text in CSS ?

Last Updated : 25 Aug, 2022

In this article, we will learn about CSS selectors for elements containing certain text. Selectors are used to finding the HTML elements you want to style. We can achieve this task by using an attribute-value selector.

CSS [attribute-value] Selector: In the [attribute-value] selector, you can choose any attribute name from the HTML document and the name of the value. After providing the appropriate attribute and value, the parser will find that attribute with that value and accordingly change as per the CSS property or rule.

Syntax:

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

Example 1: In the below code, we will make use of the above CSS [attribute-value] selector.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <style> 
        [title~=gfg1] { 
            border: 5px solid green; 
        } 
    </style> 
</head> 
  
<body> 
    <center> 
        <h1 style="color:green">GeeksforGeeks</h1> 
        <h3>A computer science portal for geeks</h3> 
  
        <div title="gfg1">GFG1</div> 
        <div title="gfg2">GFG2</div> 
        <div title="gfg3">GFG3</div> 
    </center> 
</body> 
  
</html>

Output:

Example 2: In the below code, we will make use of the above CSS [attribute-value] selector.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <style> 
        [title~=gfg1] { 
            color: red; 
        } 
    </style> 
</head> 
  
<body> 
    <center> 
        <h1 style="color:green">GeeksforGeeks</h1> 
        <h3>A computer science portal for geeks</h3> 
  
        <h2 title="gfg2">GFG1</h2> 
        <h2 title="gfg1">GFG2</h2> 
        <h2 title="gfg3">GFG3</h2> 
    </center> 
</body> 
  
</html>