Wildcard * in CSS For Classes

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-"] {

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

  1. * Used to check if the selected thing contains the word or not. It is also known as containing wildcard.

  2. ^ Wildcard to check if selected css attribute starts with the given word.

  3. $ Wildcard to check if selected css attribute ends with the given word.

In my case:

<!DOCTYPE html>

/* Define styles */
a:not([href*="#"]) { /* WE USE * HERE to check if element contains */
background: red;
color: white;
h1 {
body {
background: black;
a {
color: silver;
a[href^="#"] {
color: blue;
a[href$="#"] {
color: green;
<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>

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:


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-"


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


to cover preceding white spaces.

Also, here you have the same documentation in Spanish

css :not with wildcard *


Clearly this works if your target is a direct child of the parent.