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
Wildcard Selectors (*, ^ and $) in CSS for classes
In CSS, selectors are used to selecting the elements by class name, id, tag, etc. There are also some wildcard selectors available in CSS, which we can use to define the queries to select the HTML elements.
Wildcard selectors allow us to select an HTML element containing the particular substring in the value of the particular attribute, such as class or id. In this tutorial, we will learn to use the *,^, and $ wildcard selectors for classes and id.
Contains (*=) wildcard selector in CSS
The contains (*=) wildcard selector allows developers to find all HTML elements whose attribute value contains the ‘string’ as a substring. For example, using the ‘*’ wildcard selector with the class finds all HTML elements whose class name contains the string.
Syntax
Users can follow the syntax below to use the contains (*) wildcard selector for classes.
[class*="string"] {
}
The above syntax selects all HTML elements containing the ‘string’ as a substring in the class name.
Example
In the example below, we have created the four different div elements and added the texts inside that according to its class name. In CSS, we have used the ‘contains’ wildcard selector to select all div elements whose class name contains the ‘test’ as a substring.
In the output, users can observe the colour of the first two div element’s texts is red as it contains the class name with the ‘test’ substring.
<html>
<head>
<style>
[class*="test"] {
color: red;
font-size: 2rem;
}
</style>
</head>
<body>
<h2> Using the <i> contains (*=) </i> wildcard CSS selector in CSS. </h2>
<div class = "test1"> This is a text with the class name test1.</div>
<div class = "sampletest"> This is a text with the class name sampletest. </div>
<div class = "demo"> This is a text with the class name demo test. </div>
<div class = "element"> This is a text with the class name element.</div>
</body>
</html>
Starts with (^=) wildcard selector in CSS
The starts with (^=) wildcard selector allows us to select all HTML elements whose attribute value starts with the particular substring.
Syntax
Users can follow the syntax below to use the starts with wildcard selector for classes.
[class^="string"] {
}
The above syntax selects all HTML elements whose class name starts with the ‘string’.
Example
In the example below, we have used the starts with (^=) wildcard CSS selector with the class to select elements based on the class name.
In the output, users can observe that the first and third div element’s text turns blue as it contains the ‘test’ string at the start. The second div element contains the ‘test’ in the class name, but it is at the end of the class name, so it is not selected by the starts with (^=) wildcard selector.
<html>
<head>
<style>
[class^="test"] {
color: blue;
font-weight: bold;
}
</style>
</head>
<body>
<h2> Using the <i> starts with (^=) </i> wildcard CSS selector in CSS </h2>
<div class = "test1"> This is a text with the class name test1.</div>
<div class = "sampletest"> This is a text with the class name sampletest. </div>
<div class = "testdemo"> This is a text with the class name testdemo test. </div>
<div class = "element"> This is a text with the class name element. </div>
</body>
</html>
Ends with ($=) wildcard selector in CSS
The ends with ($=) wildcard selector selects all HTML elements if a particular attribute value contains the substring at the end. For example, if the class names of two different elements are ‘onestart’ and ‘lastone’, and the substring is ‘one’, it will select an HTML element with only the ‘lastone’ class name as it contains the one substring at the end.
Syntax
Users can follow the syntax below to use the ends with ($=) wildcard CSS selector for classes.
[class$="string"] {
}
The above syntax selects all HTML elements whose class name ends with the ‘string’ substring.
Example
In the example below, 2nd and fourth div elements contain the ‘test’ substring at the end in the class name value. We have used the ends with ($=) wildcard CSS selector to select both div elements and applied border, margin, and padding to them.
<html>
<head>
<style>
[class$="test"] {
border: 2px solid pink;
padding: 5px 10px;
margin: 5px;
}
</style>
</head>
<body>
<h2> Using the <i> ends with ($=) </i> wildcard CSS selector in CSS.</h2>
<div class = "test1"> This is a text with the class name test1.</div>
<div class = "sampletest"> This is a text with the class name sampletest. </div>
<div class = "testdemo"> This is a text with the class name testdemo test. </div>
<div class = "elementtest"> This is a text with the class name elementtest. </div>
</body>
</html>
Example
In the example below, we use id with the ends with CSS selector rather than using the class as an attribute. It demonstrates how to use other attributes with the wildcard CSS selector to select HTML elements.
Here, we select all HTML elements whose id contains the ‘name’ at the end of its value and change font style and colour.
<html>
<head>
<style>
[id$="name"] {
color: lightskyblue;
font-style: italic;
font-size: 1.5rem;
}
</style>
</head>
<body>
<h2> Using the <i> ends with ($=) </i> wildcard CSS selector in CSS.</h2>
<div id = "firstname"> id == firstname </div>
<div id = "lastname"> id == lastname </div>
<div id = "age"> id == age </div>
<div id = "namestart"> id == namestart </div>
</body>
</html>
Users learned to use the wildcard CSS selectors for classes. Users can use the contains (*=) CSS selector to get elements whose attribute value contains a substring in the middle, starts with (^=) CSS selector to get elements whose attribute value contains a substring in the start, and ends with ($=) for the end.
Also, users learned how to use wildcard CSS selector with other attributes such as an id in the last example.
7K+ Views
