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
Wildcard Selectors (*, ^ and $) in CSS for classes
CSS wildcard selectors allow us to select HTML elements containing a particular substring in the value of attributes like class, id, or other attributes. They are useful when applying styles to multiple elements having a common pattern in their attributes.
In this article, we will learn about three types of wildcard selectors
Syntax
/* Contains wildcard */
[attribute*="value"] { /* styles */ }
/* Starts with wildcard */
[attribute^="value"] { /* styles */ }
/* Ends with wildcard */
[attribute$="value"] { /* styles */ }
Contains (*=) wildcard selector
The contains (*=) wildcard selector finds all HTML elements whose attribute value contains the specified substring anywhere within the value.
Example
The following example selects all div elements whose class name contains "test" as a substring
<!DOCTYPE html>
<html>
<head>
<style>
[class*="test"] {
color: #04af2f;
font-size: 1.3rem;
padding: 10px;
margin: 5px 0;
}
</style>
</head>
<body>
<h2>Contains (*=) Wildcard Selector</h2>
<div class="test1">This div has class "test1" - contains "test"</div>
<div class="sampletest">This div has class "sampletest" - contains "test"</div>
<div class="demo">This div has class "demo" - no "test"</div>
<div class="element">This div has class "element" - no "test"</div>
</body>
</html>
The first two divs (test1 and sampletest) appear in green color with larger font size because their class names contain "test". The other two divs remain unstyled.
Starts with (^=) wildcard selector
The starts with (^=) wildcard selector finds all HTML elements whose attribute value starts with the specified substring.
Example
The following example selects all div elements whose class name starts with "test"
<!DOCTYPE html>
<html>
<head>
<style>
[class^="test"] {
color: #04af2f;
border: 2px solid black;
padding: 10px;
margin: 5px 0;
}
</style>
</head>
<body>
<h2>Starts with (^=) Wildcard Selector</h2>
<div class="test1">This div has class "test1" - starts with "test"</div>
<div class="testdemo">This div has class "testdemo" - starts with "test"</div>
<div class="sampletest">This div has class "sampletest" - does not start with "test"</div>
<div class="element">This div has class "element" - does not start with "test"</div>
</body>
</html>
The first two divs (test1 and testdemo) appear with green text and black borders because their class names start with "test". The other two divs remain unstyled.
Ends with ($=) wildcard selector
The ends with ($=) wildcard selector finds all HTML elements whose attribute value ends with the specified substring.
Example
The following example selects all div elements whose id ends with "test"
<!DOCTYPE html>
<html>
<head>
<style>
[id$="test"] {
color: #04af2f;
font-size: 1.3rem;
background-color: #f0f0f0;
padding: 10px;
margin: 5px 0;
}
</style>
</head>
<body>
<h2>Ends with ($=) Wildcard Selector</h2>
<div id="sampletest">This div has id "sampletest" - ends with "test"</div>
<div id="elementtest">This div has id "elementtest" - ends with "test"</div>
<div id="test1">This div has id "test1" - does not end with "test"</div>
<div id="demo">This div has id "demo" - does not end with "test"</div>
</body>
</html>
The first two divs (sampletest and elementtest) appear with green text, larger font, and light gray background because their id values end with "test". The other two divs remain unstyled.
Conclusion
CSS wildcard selectors provide powerful pattern matching for attributes. Use *= to find substrings anywhere, ^= for prefixes, and $= for suffixes in attribute values.
14K+ Views
