wildcard * in CSS for classes
What you need is called attribute selector. An example, using your html structure, is the following:
div[class^="tocolor-"], div[class*=" tocolor-"] {
color:red
}
In the place of div
you can add any element or remove it altogether, and in the place of class
you can add any attribute of the specified element.
[class^="tocolor-"]
— starts with "tocolor-".[class*=" tocolor-"]
— contains the substring "tocolor-" occurring directly after a space character.
Demo: http://jsfiddle.net/K3693/1/
More information on CSS attribute selectors, you can find here and here.
And from MDN Docs MDN Docs
:not CSS Selector wild card to select a tags containing # in href
Wildcard selector is used to select multiple elements simultaneously. It selects similar type of class name or attribute and use CSS property.
There are 3 wildcard css selectors
*
Used to check if the selected thing contains the word or not. It is also known as containing wildcard.^
Wildcard to check if selected css attribute starts with the given word.$
Wildcard to check if selected css attribute ends with the given word.
In my case:
<!DOCTYPE html>
<html>
<head>
<style>
/* Define styles */
a:not([href*="#"]) { /* WE USE * HERE to check if element contains */
background: red;
color: white;
}
h1 {
color:white;
}
body {
text-align:center;
width:60%;
background: black;
}
a {
color: silver;
}
a[href^="#"] {
color: blue;
}
a[href$="#"] {
color: green;
}
</style>
</head>
<body>
<h1>Example containing # in url</h1>
<!-- Since we have used * with #, all items with
# in the above code are selected -->
<a href="/">I am not having # in my url</a><br>
<a href="/questions/68938789/not-css-selector-wild-card-to-select-a-tags-containing-in-href#">I am a link containing # at last.</a>
<a href="#hello"> I am link containing # at start of href</a>
<a href="hello#hello"> I am a link containing # in middle</a>
<a href="https://stackoverflow.com/">i am also not having # in my url like first link</a>
</body>
</html>
CSS selector wildcard inside class name
You can use the following solution:
[class^="col-"][class$="-12"] { color:red;}
<span class="col-lg-12">col-lg-12</span><span class="col-md-12">col-md-12</span><span class="col-lg-8">col-lg-8</span><span class="col-md-9">col-md-9</span>
Is it possible to use a CSS wildcard in the middle of an attribute selector?
You can't use a wildcard like that, but to get the desired result (ID starts with lorem
and ends with Ipsum
) you can use the attribute starts-with and ends-with selectors instead, like so:
p[id^="lorem"][id$="Ipsum"]
Remember that by linking multiple attribute selectors like this (along with the p
type selector), you're doing an AND match with all of them on the same element.
jsFiddle demo
Sass - Class name wildcard
In CSS you can use the attribute selector with ^
:
div[class^="div-"]
==> Selects all div
with a class
attribute value starting with "div-"
Example:
div { height: 20px; margin-bottom: 5px; border: 1px solid black;}
div[class^="div-"] { border-color: red;}
<div class="div-one"></div><div class="div-two"></div><div class="other"></div><div class="div-three"></div>
A CSS wildcard selector to match dynamic classnames?
It looks like you're trying to match elements whose data-parent
attribute corresponds to an existing number based on another element's .parent-element*
class. Unfortunately, Selectors does not support this.
Based on your description of the markup I don't think there's much of a way around this other than DOM manipulations. I do wish to add though, that subtasks should ideally be marked up with nested lists. However if you have no control over the source markup, you'll have to find another way.
Bootstrap CSS classes wildcard
Pedro, what you're looking for is called attribute selector. In your particular case, you can use it like this:
.unique [class~=col] {color:red }
but you could also use this with more wide options like
[class*='col-']
to cover preceding white spaces.
Also, here you have the same documentation in Spanish
css :not with wildcard *
Yes.
Clearly this works if your target is a direct child of the parent.
.vnu-hours-sel *:not(#results-content) { visibility: hidden;}
<div class="vnu-hours-sel"> <div id="one">One</div> <div id="two">Two</div> <div id="results-content">Content</div></div>
Related Topics
Download Attribute in <A> Tag Doesn't Work When File Url Called from Sub Domain
How to Align a ≪Div≫ to the Middle (Horizontally/Width) of the Page
Why Does Height 100% Work When Doctype Is Removed
How to Style Html5 Range Input to Have Different Color Before and After Slider
Advantages of Using Display:Inline-Block VS Float:Left in Css
Margin-Top Not Working For Span Element
How to Fix Invalid Request (Unsupported Ssl Request)
How to Fill Html5 Input[Type=Range] on the Left Side of the Thumb With CSS Only
Browsers Scrollbar Is Under My Fixed Div
Laravel - Barryvdh Pdf - How Include External CSS File into HTML View
Header and Footer in Each Page in Print Mode With CSS
How to Make Multiple Divs Display in One Line But Still Retain Width