Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Is there any selector for elements containing certain text in CSS?
In CSS, selectors are used to select an HTML element to style. There are various CSS selectors available in CSS, such as class selector, id selector, name selector, etc.
Sometimes, developers need to select an HTML element based on the custom attribute value instead of selecting it based on the class name or id. We can use the attribute-value CSS selector to select the HTML element based on the particular attribute value. We can also add the custom attribute instead of only pre-defined attributes in HTML.
Syntax
Users can follow the syntax below to use the attribute-value CSS selector to select elements containing certain text.
[attribute name="attribute value"] {
/* CSS code */
}
In the above syntax, the attribute name can be the name of the attribute that HTML element contains, and you want to select an element based on attribute value. The attribute value is a value of the particular attribute.
Example 1
We have created the ‘social’ div element in the example below. In the div element, we have added the child div elements containing the ‘app_name’ attribute and its value. In CSS, we used the ‘app_name’ as an attribute name and different values to select different div elements.
In the output, users can observe that it has styled the div elements containing the ‘Facebook’ and ‘Instagram’ attribute value.
<html>
<head>
<style>
[app_name="facebook"] {
background-color: #3b5998;
color: white;
}
[app_name="instagram"] {
background-color: #e4405f;
color: white;
}
</style>
</head>
<body>
<h3> Using the <i> [attribute=value] </i> CSS selector to target an element based on its attribute value </h3>
<div class = "social">
<div app_name = "facebook"> facebook </div>
<div app_name = "twitter"> twitter </div>
<div app_name = "instagram"> instagram </div>
<div app_name = "youtube"> youtube </div>
</div>
</body>
</html>
Example 2
In the example below, we have used the attribute-value selector, but we have used the ‘~’ sign for the partial selector. It selects the HTML element, even if the attribute contains a particular word in a value, rather than matching the whole word in the first example.
We used the ‘app’ word in the attribute-value CSS selector here. So, it will select all HTML elements whose type attribute contains the ‘app’ word. The output shows that it has styled the first three div elements as it contains the app word.
<html>
<head>
<style>
[type~="app"] {
color: red;
width: 200px;
text-align: center;
border: 1px solid black;
margin: 10px;
padding: 10px;
border: 3px solid green;
}
</style>
</head>
<body>
<h3> Using the <i> [attribute~=value] </i> CSS selector to target an element based on its attribute value </h3>
<div class = "appllication">
<div type = "web app"> Web application </div>
<div type = "mobile app"> Mobile application </div>
<div type = "desktop app"> Desktop application </div>
<div type = "device"> Anroid device </div>
</div>
</body>
</html>
Example 3
We used the ‘^’ sign with the attribute-value CSS selector in the example below. It allows the selection of all elements whose attribute value starts with a particular word.
Here, we have created the div elements with different class names. In CSS, we use the attribute-value selector to select all HTML elements whose class name starts with the ‘a’ character.
<html>
<head>
<style>
[class ^="a"] {
background-color: aqua;
height: auto;
font-size: 2rem;
padding: 10px;
width: 300px;
margin: 10px;
}
</style>
</head>
<body>
<h3> Using the <i> [attribute*=value] </i> CSS selector to target an element based on its attribute value </h3>
<div class = "start">
<div class = "abc"> ABC </div>
<div class = "ade"> ADE </div>
<div class = "bcd"> BCD </div>
<div class = "cde"> CDE </div>
</div>
</body>
</html>
Example 4
In the example below, we created the table containing the snack's name, expiry date, and price. Also, we added a status equal to expired for the expired snacks. We selected the ‘expired’ snacks in CSS and styled them using the attribute-value CSS selector.
<html>
<head>
<style>
td[status*=expired] {
color: red;
background-color: green;
}
</style>
</head>
<body>
<h3> Using the <i> [attribute*=value] </i> CSS selector to target an element based on its attribute value </h3>
<table>
<tr>
<th> Snack </th>
<th> Expiry </th>
<th> Price </th>
</tr>
<tr>
<td> Chips </td>
<td> 01/01/2024 </td>
<td> 20 INR </td>
</tr>
<tr>
<td> Chocolate </td>
<td> 01/09/2023 </td>
<td> 30 INR </td>
</tr>
<tr>
<td> Candy </td>
<td status = "expired"> 01/01/2022 </td>
<td> 25 INR </td>
</tr>
</table>
</body>
</html>
Users learned to select an HTML element based on a certain text. We can add custom attributes to the HTML element, and after that, we can use the attribute-value CSS selector to select elements based on the attribute value.
3K+ Views
