How to use CSS Wildcards

A wildcard CSS selector is used to select multiple elements simultaneously. You can use it to select similar type of class name or attribute to apply CSS properties.

The CSS * wildcard

The [attribute*="foo"] selector is used to select that elements whose attribute value contains the specified sub string "foo". This example shows how to use a wildcard to select all div's with a class that contains "foo". This could be at the start, the end or in the middle of the class.

Example of the CSS * wildcard:

CSS for the CSS * wildcard

[div*="foo"] {
    background: #ff0000;
}

HTML for the CSS * wildcard

<!-- Since we have used * with "foo", all items with "foo" in them are selected -->

<div class="barfoo">This will have a red background.</div>
<div class="barfoobar">This will have a red background.</div>
<div class="foobar">This will have a red background.</div>
<div class="bar">No red background here.</div>

RESULT for the CSS * wildcard

This will have a red background.
This will have a red background.
This will have a red background.
No red background here.

The CSS ^ wildcard

The [attribute^="foo"] selector is used to select those elements whose attribute value begins with a specified value "foo". This example shows how to use a wildcard to select all div's with a class that starts with "foo".

Example for the CSS ^ wildcard:

CSS for the CSS ^ wildcard

[div^="foo"] {
    background: #ff0000;
}

HTML for the CSS ^ wildcard

<!-- Since we have used ^ with "foo", all items with "foo" at the start will be selected -->

<div class="barfoo">No red background here.</div>
<div class="barfoobar">No red background here.</div>
<div class="foobar">This will have a red background.</div>
<div class="bar">No red background here.</div>

RESULT for the CSS ^ wildcard

No red background here.
No red background here.
This will have a red background.
No red background here.

The CSS $ wildcard

The [attribute$="foo"] selector is used to select those elements whose attribute value ends with a specified value "foo". This example shows how to use a wildcard to select all div's with a class that ends with "foo".

Example of the CSS $ wildcard:

CSS for the CSS $ wildcard

[div$="foo"] {
    background: #ff0000;
}

HTML for the CSS $ wildcard

<!-- Since we have used $ with "foo", all items with "foo" at the end will be selected -->

<div class="barfoo">This will have a red background.</div>
<div class="barfoobar">No red background here.</div>
<div class="foobar">No red background here.</div>
<div class="bar">No red background here.</div>

RESULT for the CSS $ wildcard

This will have a red background.
No red background here.
No red background here.
No red background here.