css class starts with use a wildcard to select all div with a class that starts with str. Match an element that has the specified class.
css class starts with
A class selector in CSS starts with a dot (.). A CSS class is an attribute used to define a group of HTML elements in order to apply unique styling and formatting to those elements with CSS.
Match all elements having class name starting with a specific string
CSS [attribute^=value] Selector
div[class^="product"] {
background: #3d3d3d;
}
Example
div[class^='loverank'], div[class*=' loverank']{
color: #F00;
}
Wildcard Selectors (*, ^ and $) in CSS for classes
<!DOCTYPE html>
<html>
<head>
<style>
/* Define styles of selected items, h1 and
rest of the body */
[class*="str"] { /* WE USE * HERE */
background: red;
color: white;
}
h1 {
color:red;
}
body {
text-align:center;
width:80%;
}
</style>
</head>
<body>
<h2>www.pakainfo.com</h2>
<div class="first_str">The Main Website free download.</div>
<div class="second">The Global Website free download.</div>
<div class="my-strt">The Primary Website free download.</div>
<p class="mystr">WorlCup Greatting</p>
</body>
</html>
CSS: Class name selector- name starts with
a[class^='color-'], a[class*=' color-'] { ... }
Don’t Miss : How To Get CSS Class Name Property Using Jquery?
You can use the jQuery filter() function to match all elements having class name starting with a specific string.
Here’s an example code snippet that demonstrates how to use filter() to select elements with class names that start with a specific string:
<div class="foo1">Element 1</div> <div class="foo2">Element 2</div> <div class="bar1">Element 3</div> <div class="bar2">Element 4</div>
$(document).ready(function() {
// Select all elements with class names starting with "foo"
$('div[class^="foo"]').css('background-color', 'yellow');
});
In this example, we use the attribute-starts-with selector ([attribute^=”value”]) to select all
The resulting output will be the first two
I hope you get an idea about css class starts with.
I would like to have feedback on my infinityknow.com.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.