Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- 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 in CSS for Classes
CSS wildcard selectors allow us to select an HTML element containing the particular substring in the value of the particular attribute, such as classes, id or other attributes. It is useful when style is applied to multiple elements having a common pattern in their attributes.
In this article, we will be learning about wildcard selectors in CSS and it's types which are mentioned below.
Contains (*=) wildcard selector
CSS contains(*=) wildcard selector finds all HTML elements whose attribute value contains the specified substring. It is useful when you want to select elements with specified substring anywhere within their attribute value.
- We have created four div elements having text content according to its class name.
- In CSS, we have used the 'class*="test"' to select all div elements whose class name contains the 'test' as a substring.
- Then we have used color and font-size property to change the text-color and font size of the selected div elements.
Example
Here is an example code implementing above mentioned steps to change the text color and font size of div elements using contains(*=) wildcard selector.
<html>
<head>
<title>
Wildcard Selectors in CSS for classes
</title>
<style>
[class*="test"] {
color: #04af2f;
font-size: 1.3rem;
}
</style>
</head>
<body>
<h2>
Wildcard Selectors in CSS for classes
</h2>
<p>
In this example we have used <strong>Contains (*=)
</strong> wildcard selector to change the text color
and increase the font size of div element.
</p>
<div class="test1">
This is a div with the class name test1.
</div>
<div class="sampletest">
This is a div with the class name sampletest.
</div>
<div class="demo">
This is a div with the class name demo.
</div>
<div class="element">
This is a div with the class name element.
</div>
</body>
</html>
Starts with (^=) wildcard selector
CSS starts with(^=) wildcard selector finds all HTML elements whose attribute value starts with the specified substring. It is useful when you want to select elements beginning with a specific string in their attribute value.
- We have created four div elements having text content according to its class name.
- In CSS, we have used the 'class^="test"' to select all div elements whose class name starts with 'test' as a substring.
- Then we have used color and border property to change the text-color and add border to selected div elements.
Example
Here is an example code implementing above mentioned steps to change the text color and font size of div elements using starts with(^=) wildcard selector.
<html>
<head>
<title>
Wildcard Selectors in CSS for classes
</title>
<style>
[class^="test"] {
color: #04af2f;
border: 2px solid black;
}
</style>
</head>
<body>
<h2>
Wildcard Selectors in CSS for classes
</h2>
<p>
In this example we have used <strong>Starts with(^=)
</strong> wildcard selector to change the text color
and add the border to div element.
</p>
<div class="test1">
This is a div with the class name test1.
</div>
<div class="sampletest">
This is a div with the class name sampletest.
</div>
<div class="testdemo">
This is a div with the class name test demo.
</div>
<div class="element">
This is a div with the class name element.
</div>
</body>
</html>
Ends with ($=) wildcard selector
CSS ends with($=) wildcard selector finds all HTML elements whose attribute value ends with the specified substring. It is useful when you want to select elements ending with a specific string in their attribute value.
- We have created four div elements having text content according to its id name.
- In CSS, we have used the 'id$="test"' to select all div elements whose id ends with 'test' as a substring.
- Then we have used color and font-size property to change the text-color and font size of the selected div elements.
Example
Here is an example code implementing above mentioned steps to change the text color and font size of div elements using ends with($=) wildcard selector.
<html>
<head>
<title>
Wildcard Selectors in CSS for classes
</title>
<style>
[id$="test"] {
color: #04af2f;
font-size: 1.3rem;
}
</style>
</head>
<body>
<h2>
Wildcard Selectors in CSS for classes
</h2>
<p>
In this example we have used <strong>Ends with ($=)
</strong> wildcard selector to change the text color
and increase the font size of div element.
</p>
<div id="test1">
This is a div with the id name test1.
</div>
<div id="sampletest">
This is a div with the id name sampletest.
</div>
<div id="testdemo">
This is a div with the id name test demo.
</div>
<div id="elementtest">
This is a div with the id name element test.
</div>
</body>
</html>
Conclusion
In this article, we have learned and understood about wildcard CSS selectors for classes and how to use them. We can use the contains(*=) CSS selector to get elements whose attribute value contains the substring, starts with(^=) CSS selector to get elements whose attribute value contains a substring at the beginning, and ends with($=) CSS selector to get elements whose attribute value contains a substring at the end.
13K+ Views
