Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
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 attribute or we can add custom attribute in the HTML document.
In this article, we are having some div element with some attribute, our task is to select elements containing certain text in CSS
Approaches to Select Elements Containing Certain Text
Here is a list of approaches to select elements containing certain text in CSS which we will be discussing in this article with stepwise explaination and complete example codes.
- Using Attribute Value Selector
- Using Attribute Contain Word(~=) Selector
- Using Attribute Contain Substring(*=) Selector
- Using Attribute Starts With(^=) Selector
- Using Attribute Ends With($=) Selector
Using Attribute Value Selector
To select elements containing certain text in CSS, we have used CSS attribute value selector.
- We have used "[app_name="app1"]" to select div with attribute app_name having attribute value as app1. Similarly, we have selected div with attribute value app2.
- Then, we have used CSS color and font-size property to design the selected elements.
Example
Here is a complete example code implementing above mentioned steps to select elements containing certain text using CSS attribute value selector.
<html>
<head>
<title>
Selecting Elements Containing Certain Text in CSS
</title>
<style>
[app_name="app1"] {
color: #04af2f;
font-size: 1.3rem;
}
[app_name="app2"] {
color: #04af2f;
font-size: 1.3rem;
}
</style>
</head>
<body>
<h3>
Selecting Elements Containing Certain Text in CSS
</h3>
<p>
In this example we have used <strong>attribute
</strong> selector to change the text color
and increase the font size of div element.
</p>
<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>
Using Attribute Contain Word(~=) Selector
In this approach to select elements containing certain text in CSS, we have used CSS contain word (~=) selector. It selects elements that have a specific attribute with a value containing a specified word.
- We have used "[type~="app"]" to select all div elements with attribute name type containing word app.
- Then, we have used CSS color and font-size property to design the selected elements.
Example
Here is a complete example code implementing above mentioned steps to select elements containing certain text using CSS contain word(~=) selector.
<html>
<head>
<title>
Selecting Elements Containing Certain Text in CSS
</title>
<style>
[type~="app"] {
color: #04af2f;
font-size: 1.3rem;
}
</style>
</head>
<body>
<h3>
Selecting Elements Containing Certain Text in CSS
</h3>
<p>
In this example we have used <strong>[type~="app"]
</strong> selector to change the text color and
increase the font size of div element.
</p>
<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 tutoril">This div is of type tutorial.</div>
<div type="device app">This div is of type app.</div>
</body>
</html>
Using Attribute Contain Substring(*=) Selector
In this approach to select elements containing certain text in CSS, we have used CSS contain substring(*=) selector. It selects elements that have a specific attribute with a value containing a specific substring.
- We have used "[class*="test"]" to select all div elements with class name containing substring test.
- Then, we have used CSS color and font-size property to design the selected elements.
Example
Here is a complete example code implementing above mentioned steps to select elements containing certain text using CSS contain substring(*=) selector.
<html>
<head>
<title>
Selecting Elements Containing Certain Text in CSS
</title>
<style>
[class*="test"] {
color: #04af2f;
font-size: 1.3rem;
}
</style>
</head>
<body>
<h3>
Selecting Elements Containing Certain Text in CSS
</h3>
<p>
In this example we have used <strong>Contains (*=)
</strong> wildcard selector to change the text color
and increase the font size of div element having test
in it's class name.
</p>
<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>
Using Attribute Starts With(^=) Selector
In this approach to select elements containing certain text in CSS, we have used CSS starts with (^=) selector. It selects elements that have a specific attribute with a value that starts with a specific string.
- We have used "[type^="test"]" to select all div elements with attribute name type starting with word test.
- Then, we have used CSS color, border and max-width property to design the selected elements.
Example
Here is a complete example code implementing above mentioned steps to select elements containing certain text using CSS starts with(^=) selector.
<html>
<head>
<title>
Selecting Elements Containing Certain Text in CSS
</title>
<style>
[type^="test"] {
color: #04af2f;
border: 2px solid black;
max-width: fit-content;
}
</style>
</head>
<body>
<h2>
Selecting Elements Containing Certain Text in CSS
</h2>
<p>
In this example we have used <strong>Starts with(^=)
</strong> wildcard selector to change the text color
and add the border to div element.
</p>
<div type="test1">
This is a div with the class name test1.
</div>
<div type="sampletest">
This is a div with the class name sampletest.
</div>
<div type="testdemo">
This is a div with the class name test demo.
</div>
<div type="element">
This is a div with the class name element.
</div>
</body>
</html>
Using Attribute Ends With($=) Selector
In this approach to select elements containing certain text in CSS, we have used CSS ends with ($=) selector. It selects elements that have a specific attribute with a value that ends with a specific string.
- We have used "[type^="test"]" to select all div elements with attribute name type ending with word test.
- Then, we have used CSS color and font-size property to design the selected elements.
Example
Here is a complete example code implementing above mentioned steps to select elements containing certain text using CSS ends with($=) selector.
<html>
<head>
<title>
Selecting Elements Containing Certain Text in CSS
</title>
<style>
[type$="test"] {
color: #04af2f;
font-size: 1.3rem;
}
</style>
</head>
<body>
<h2>
Selecting Elements Containing Certain Text in CSS
</h2>
<p>
In this example we have used <strong>Ends with ($=)
</strong> wildcard selector to change the text color
and increase the font size of div element.
</p>
<div type="test1">
This is a div with the id name test1.
</div>
<div type="sampletest">
This is a div with the id name sampletest.
</div>
<div type="testdemo">
This is a div with the id name test demo.
</div>
<div type="elementtest">
This is a div with the id name element test.
</div>
</body>
</html>
Conclusion
In this article, we have understood five different approaches to select elements containing certain text in CSS which are: by using attribute-value selector, by contain word(~=) selector, by contain substring(*=) selector, by starts with(^=) and by ends with($=) selector.
8K+ Views
