CSS Wildcard Class Selectors: Match Class Name Prefixes

You will learn why CSS class selectors do not support wildcard characters inside a class name, why a shared class is usually the best solution, and how CSS attribute selectors can match class-name prefixes when necessary.

A CSS class selector matches one exact class name.

.tocolor

This means “select elements that have a class named tocolor.” It does not mean “select classes similar to tocolor.”

The * character is a universal selector in CSS, but it cannot be inserted into a class selector as a wildcard. Therefore, this is not valid for matching numbered class names:

/* Does not mean: every class beginning with tocolor- */
.tocolor-* {
  background: red;
}

In this case, the HTML already has the ideal structure: every relevant element shares the tocolor class. Put styles shared by every item on that class, and keep tocolor-1, tocolor-2, and similar classes only for styles that are genuinely unique.

This pattern matters because CSS should describe reusable visual roles. A shared class gives your stylesheet a stable, readable hook that does not depend on naming patterns or class order.

Think of classes as labels on boxes.

• .tocolor asks: “Does this box have the exact label tocolor?”
• .tocolor-1 asks: “Does this box have the exact label tocolor-1?”
• .tocolor-* would ask for a partly written label with a blank at the end, but normal CSS class selectors do not support that kind of label search.

When several boxes need the same treatment, give them all one shared label. Add a second label only when a particular box needs special treatment.

Use a shared class for common styling:

<div class="tocolor tocolor-1">tocolor 1</div>
<div class="tocolor tocolor-2">tocolor 2</div>
<div class="tocolor tocolor-3">tocolor 3</div>

.tocolor {
  background: red;
  color: white;
  padding: 0.5rem;
}

Every element containing the exact tocolor class receives these declarations.

Use the numbered class only for an exception:

.tocolor-2 {
  background: royalblue;
}

The second item matches both selectors. Since .tocolor-2 appears later and has the same specificity as .tocolor, its background value wins.

If you cannot add a shared class, an attribute selector can inspect the class attribute:

[class^="tocolor-"] {
  background: red;
}

^= means “the attribute value starts with.” This matches:

<div class="tocolor-1">One</div>

However, it does not match this element because its entire class attribute starts with card, not tocolor-:

<div class="card tocolor-1">One</div>

For class-token matching with a prefix, these selectors can cover both possible positions:

[class^="tocolor-"],
[class*=" tocolor-"] {
  background: red;
}

Even then, a real shared class such as .tocolor is clearer and more robust.

Consider this code:

<div class="tocolor tocolor-1">First</div>
<div class="tocolor tocolor-2">Second</div>

.tocolor {
  background: red;
}

.tocolor-2 {
  background: blue;
}

Step by step:

1. CSS checks the first div.
2. It has tocolor, so it matches .tocolor and gets a red background.
3. It does not have tocolor-2, so the second rule does not apply.
4. CSS checks the second div.
5. It has tocolor, so it initially gets a red background.
6. It also has tocolor-2, so it matches the second rule.
7. Both selectors have equal specificity: one class selector each.
8. The .tocolor-2 rule occurs later, so its blue background overrides red.

The final result is a red first element and a blue second element.

Shared classes plus optional modifier classes are common in real interfaces:

• Notification messages: .alert, .alert-success, .alert-error
• Buttons: .button, .button-primary, .button-danger
• Product cards: .product-card, .product-card-featured
• Form fields: .field, .field-invalid, .field-disabled
• Dashboard rows: .row, .row-warning, .row-selected

For example:

<button class="button button-danger">Delete</button>

.button {
  border: 0;
  border-radius: 0.25rem;
  padding: 0.5rem 0.75rem;
}

.button-danger {
  background: #c62828;
  color: white;
}

The base class contains shared button styling. The additional class describes a variation.

In production code, developers usually avoid relying on class-name prefixes for ordinary styling. Instead, they use a base class and a modifier class.

A common naming approach is BEM-like naming:

<article class="card card--featured">
  Featured content
</article>

.card {
  border: 1px solid #ddd;
  padding: 1rem;
}

.card--featured {
  border-color: gold;
}

This provides several benefits:

• Shared styles have one obvious selector.
• Variations are explicit and easy to search for.
• Reordering classes in HTML does not break the CSS.
• JavaScript can add or remove a meaningful state class such as is-loading or is-active.

Attribute selectors are useful when working with HTML you cannot change, such as third-party markup, generated content, or migration code. They are generally a fallback rather than the default architecture.

For data that is an identifier rather than a visual state, use a data-* attribute:

<div class="tocolor" data-color-id="1">tocolor 1</div>

.tocolor {
  background: red;
}

JavaScript can read data-color-id without turning an identifier into a styling convention.

Expecting * to work inside a class selector

/* Incorrect: CSS does not interpret this as a wildcard class selector */
.tocolor-* {
  background: red;
}

Use .tocolor for shared styling, or use an attribute selector only when you cannot use a shared class.

Using an attribute prefix selector without considering class order

[class^="tocolor-"] {
  background: red;
}

This only works when the class attribute begins with tocolor-.

<!-- Does not match [class^="tocolor-"] -->
<div class="card tocolor-1">Item</div>

Avoid the issue by adding a shared class:

<div class="card tocolor">Item</div>

Matching unintended class names with *=

/* May match an unrelated class such as notocolor-1 */
[class*="tocolor-"] {
  background: red;
}

The *= operator means “contains this text anywhere,” not “contains this complete class token.” Prefer a normal class selector.

Using numbered classes for content identity

A class such as tocolor-4 is reasonable if it represents a style variation. If 4 is database data, a product ID, or an application identifier, store it separately:

<div class="tocolor" data-id="4">Item</div>

Forgetting CSS cascade order

If .tocolor and .tocolor-2 set the same property, the later rule wins when their specificity is equal. Put base rules first and modifier rules afterward.

A class selector works with individual class tokens. An attribute selector searches the raw text of an attribute value. That difference is why attribute selectors are more sensitive to formatting and class order.

/* Preferred: style a shared class */
.tocolor {
  background: red;
}

/* A specific variation */
.tocolor-2 {
  background: blue;
}

/* Prefix match on the entire class attribute value */
[class^="tocolor-"] {
  background: red;
}

/* Cover prefix class at the start or after another class */
[class^="tocolor-"],
[class*=" tocolor-"] {
  background: red;
}

• .name matches the exact class token name.
• CSS does not support .name-* as a wildcard class selector.
• ^= means “starts with.”
• $= means “ends with.”
• *= means “contains.”
• Prefer a shared semantic class over matching text inside class attributes.
• Put base styles before modifier styles when both set the same properties.

Can I use * as a wildcard in a CSS class selector?

No. .tocolor-* does not select class names beginning with tocolor-. Class selectors match exact class names.

How do I select all classes starting with a prefix in CSS?

You can use an attribute selector such as [class^="tocolor-"]. However, it only works when that prefix is at the beginning of the entire class attribute. A shared class is usually better.

Why does .tocolor style every numbered item?

An element may have multiple classes. Each div has the exact class token tocolor, so each one matches .tocolor.

Can an element have more than one CSS class?

Yes. Separate class names with spaces:

<div class="tocolor tocolor-1"></div>

The element matches both .tocolor and .tocolor-1.

Which rule wins when an element matches two class selectors?

When specificity is equal, the rule written later in the stylesheet wins for conflicting properties.

Should I use a class for an ID number?

Use a class when the number represents a styling variation. If it is application data, use data-* attributes or an actual id when appropriate.

Does [class*="tocolor-"] match only complete class names?

No. It searches raw text and can match part of another class name. It is less precise than using a dedicated shared class.

• CSS class selectors — Select elements using exact class tokens such as .button.
• CSS attribute selectors — Select elements by attribute values using operators such as ^=, $=, and *=.
• Multiple CSS classes — Combine a base class with modifier or state classes on one element.
• CSS specificity — Understand which matching rule takes precedence.
• CSS cascade — Learn why later rules can override earlier rules.
• BEM naming convention — A common pattern for base components and explicit modifiers.
• HTML data attributes — Store application-specific identifiers without using styling classes.