Home »
CSS
Wildcard Selectors (*, ^ and $) in CSS
CSS | Wildcard Selectors: In this tutorial, we will learn about the various wildcard selectors (*, ^, and $) in CSS for classes with the help of examples.
By Anjali Singh Last updated : July 11, 2023
Introduction
We all are aware of various types of selectors that can be used for developing a website or a web page. But do we know all of them? Well, if your answer to that question was no, then don't worry it is understandable but as a developer, we must try our best to get to know about various selectors. Knowing about various properties of CSS will only make our work easy and fast, there might come a time in the future where you may get stuck somewhere in your website or web page and you have no idea what to do, later when you will look for solutions for your issue you will realize that the issue was not at all tough only had you known some fundamental properties of CSS. Therefore, here in this article, we are going to discuss a very crucial property called selectors.
Selectors, as the name suggests are used for selecting elements on your website or web page and there's nothing much to do with the selectors. With the help of selectors, you can select the elements and then perform some actions on those selected elements. But as simple as it sounds, it is equally critical to know about selectors as if you happen to make use of any wrong selector then your code might get ruined and all your efforts and hard work will go in vain. Therefore, it is a must that you learn about a property thoroughly and then implement it. If you start implementing a property without proper knowledge then you might have to face some drastic effects.
Definition and usage
Now that we are aware of selectors and their importance, why don't we talk about a very specific selector called the wildcard selectors (*,^ and $)? Well, for those who heard this term for the first time, don't worry, this article has got you covered and you will learn about these selectors very easily and you will be able to make use of these selectors in no time.
CSS Wildcard selectors (*, ^ and $) for classes
So, let us move forward with the formal definition of the Wildcard Selectors:
The Wildcard Selector is used to select or choose various elements at the same time simultaneously. This selector would help in selecting similar types of class designation, name or attribute and make them CSS property usable. * wildcard can also be referred to as containing a wildcard.
Let us have a look at each one of these selectors one by one.
1. [attribute*="str"] Selector
The first and foremost in the list is [attribute*="str"] selector. The behavior of this selector is very easy to understand and you can easily put this selector to use. The purpose of this selector is to select only those elements who comprise of specified substring str.
Now for implementation, let us have a look at the syntax,
[attribute*="value"]{
}
Example of [attribute*="str"] Selector
<!DOCTYPE html>
<html>
<head>
<style>
[class*="clr"] {
width: 60%;
background: red;
color: white;
}
li {
width: 100%;
background: black;
color: white;
}
ul.list {
list-style-type: circle;
font-size: 30px;
}
</style>
</head>
<body>
<ul class="list">
<li class="clr-red">red</li>
<li class="gr">green</li>
<li class="clr-blue">blue</li>
<li class="clr-pink">pink</li>
<li class="yellow-clr">yellow</li>
</ul>
</body>
</html>
Output
In the above example, the element with class name having clr are selected and styled accordingly.
2. [attribute^="str"] Selector
The second selector that you need to learn about is the [attribute^="str"] selector. This selector is something similar to the [attribute*=" str"]selector as this selector selects those elements whose attributes begin with very specified value str.
Let us understand this better with the help of a syntax representation.
[attribute^="str"]{
}
Example of [attribute^="str"] Selector
<!DOCTYPE html>
<html>
<head>
<style>
[class^="clr"] {
width: 60%;
background: red;
color: white;
}
li {
width: 100%;
background: black;
color: white;
}
ul.list {
list-style-type: circle;
font-size: 30px;
}
</style>
</head>
<body>
<ul class="list">
<li class="clr-red">red</li>
<li class="gr">green</li>
<li class="clr-blue">blue</li>
<li class="clr-pink">pink</li>
<li class="yellow-clr">yellow</li>
</ul>
</body>
</html>
Output
In the above example, the elements are selected whose class name starts with clr.
3. [attribute$="str"] Selector
Similar to the first two selectors the purpose of [attribute$="str"] Selector is to select those elements whose attributes end with very specified value str.
Why not have a look at the syntax?
[attribute$=" str"]{
}
Example of [attribute$="str"] Selector
<!DOCTYPE html>
<html>
<head>
<style>
[class$="clr"] {
width: 60%;
background: red;
color: white;
}
li {
width: 100%;
background: black;
color: white;
}
ul.list {
list-style-type: circle;
font-size: 30px;
}
</style>
</head>
<body>
<ul class="list">
<li class="clr-red">red</li>
<li class="gr">green</li>
<li class="clr-blue">blue</li>
<li class="clr-pink">pink</li>
<li class="yellow-clr">yellow</li>
</ul>
</body>
</html>
Output
In the above example, the elements are selected whose class name ends with clr.
CSS Examples »