Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Is there any selector for elements containing certain text in CSS?
To select elements containing certain text in CSS, we can use CSS attribute selectors. We can either use pre-defined attributes or add custom attributes in the HTML document.
Syntax
/* Exact match */
[attribute="value"] { }
/* Contains word */
[attribute~="word"] { }
/* Contains substring */
[attribute*="substring"] { }
/* Starts with */
[attribute^="prefix"] { }
/* Ends with */
[attribute$="suffix"] { }
Method 1: Using Attribute Value Selector
The attribute value selector [attribute="value"] selects elements with an exact attribute value match
<!DOCTYPE html>
<html>
<head>
<style>
[app_name="app1"] {
color: #04af2f;
font-size: 1.3rem;
font-weight: bold;
}
[app_name="app2"] {
color: #2196F3;
font-size: 1.3rem;
font-weight: bold;
}
</style>
</head>
<body>
<div app_name="app1">This is a div with app1.</div>
<div app_name="app2">This is a div with app2.</div>
<div app_name="app3">This is a div with app3.</div>
<div app_name="app4">This is a div with app4.</div>
</body>
</html>
The first div appears in green bold text, the second div appears in blue bold text, while the third and fourth divs remain unstyled.
Method 2: Using Attribute Contains Word (~=) Selector
The contains word selector [attribute~="word"] selects elements where the attribute value contains a specific word as a complete word
<!DOCTYPE html>
<html>
<head>
<style>
[type~="app"] {
color: #04af2f;
font-size: 1.3rem;
background-color: #f0f8f0;
padding: 10px;
margin: 5px 0;
}
</style>
</head>
<body>
<div type="web app">This div is of type app.</div>
<div type="mobile product">This div is of type product.</div>
<div type="desktop tutorial">This div is of type tutorial.</div>
<div type="device app">This div is of type app.</div>
</body>
</html>
The first and fourth divs (containing "app" as a complete word) appear with green text, light green background, and padding, while the other divs remain unstyled.
Method 3: Using Attribute Contains Substring (*=) Selector
The contains substring selector [attribute*="substring"] selects elements where the attribute value contains a specific substring anywhere within it
<!DOCTYPE html>
<html>
<head>
<style>
[class*="test"] {
color: #04af2f;
font-size: 1.3rem;
border-left: 4px solid #04af2f;
padding-left: 10px;
}
</style>
</head>
<body>
<div class="test1">This is a div with the class name test1.</div>
<div class="sampletest">This is a div with the class name sampletest.</div>
<div class="demo">This is a div with the class name demo.</div>
<div class="element">This is a div with the class name element.</div>
</body>
</html>
The first and second divs (containing "test" anywhere in their class names) appear with green text, larger font size, and a green left border, while the other divs remain unstyled.
Method 4: Using Attribute Starts With (^=) Selector
The starts with selector [attribute^="prefix"] selects elements where the attribute value starts with a specific string
<!DOCTYPE html>
<html>
<head>
<style>
[type^="test"] {
color: #04af2f;
border: 2px solid #04af2f;
padding: 8px;
display: inline-block;
margin: 5px;
border-radius: 4px;
}
</style>
</head>
<body>
<div type="test1">This div starts with test.</div>
<div type="sampletest">This div contains test but doesn't start with it.</div>
<div type="testdemo">This div starts with test.</div>
<div type="element">This div doesn't contain test.</div>
</body>
</html>
The first and third divs (whose type attributes start with "test") appear with green text, green border, padding, and rounded corners, while the other divs remain unstyled.
Method 5: Using Attribute Ends With ($=) Selector
The ends with selector [attribute$="suffix"] selects elements where the attribute value ends with a specific string
<!DOCTYPE html>
<html>
<head>
<style>
[type$="test"] {
color: #04af2f;
font-size: 1.3rem;
background-color: #fffacd;
padding: 10px;
border-radius: 5px;
margin: 5px 0;
}
</style>
</head>
<body>
<div type="prefix">This div doesn't end with test.</div>
<div type="sampletest">This div ends with test.</div>
<div type="testdemo">This div doesn't end with test.</div>
<div type="elementtest">This div ends with test.</div>
</body>
</html>
The second and fourth divs (whose type attributes end with "test") appear with green text, larger font size, light yellow background, padding, and rounded corners, while the other divs remain unstyled.
Conclusion
CSS attribute selectors provide powerful ways to select elements containing certain text. Use exact match [attribute="value"] for precise selection, substring [attribute*="text"] for flexible matching, and prefix/suffix selectors for positional text matching.
10K+ Views
