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
Select elements whose attribute value contains a specified value with CSS
The CSS [attribute*="value"] selector is used to select elements whose attribute value contains a specified substring. This selector matches any element where the attribute contains the specified value anywhere within it.
Syntax
[attribute*="value"] {
/* CSS properties */
}
How It Works
The asterisk (*) in the selector means "contains". The selector will match any element where the specified attribute contains the given value as a substring, regardless of its position within the attribute value.
Example: Selecting Images by Alt Text
The following example selects all images whose alt attribute contains the word "tut" −
<!DOCTYPE html>
<html>
<head>
<style>
[alt*="tut"] {
border: 5px solid orange;
border-radius: 10px;
margin: 10px;
}
img {
display: block;
margin-bottom: 10px;
}
</style>
</head>
<body>
<img src="/css/images/logo.png" height="120" width="200" alt="tutor">
<img src="/css/images/logo.png" height="120" width="200" alt="my tutorials">
<img src="/css/images/logo.png" height="120" width="200" alt="learning">
</body>
</html>
The first two images display with an orange border and rounded corners because their alt attributes contain "tut" (in "tutor" and "tutorials"). The third image appears without the orange border since "learning" doesn't contain "tut".
Example: Selecting Links by URL
This example demonstrates selecting links that contain "tutorial" in their href attribute −
<!DOCTYPE html>
<html>
<head>
<style>
[href*="tutorial"] {
background-color: #f0f8ff;
color: #0066cc;
padding: 5px;
text-decoration: none;
border-left: 3px solid #0066cc;
display: block;
margin: 5px 0;
}
</style>
</head>
<body>
<a href="/tutorial/css/index.html">CSS Tutorial</a>
<a href="/tutorial/html/index.html">HTML Tutorial</a>
<a href="/about.html">About Us</a>
<a href="/contact.html">Contact</a>
</body>
</html>
The first two links (CSS Tutorial and HTML Tutorial) display with a light blue background and blue left border because their href attributes contain "tutorial". The About Us and Contact links appear with default styling.
Conclusion
The [attribute*="value"] selector is powerful for selecting elements based on partial attribute matches. It's particularly useful for styling elements that share common substrings in their attribute values.
241 Views
