CSS Selector Wildcard Inside Class Name

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

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>

CSS class selector wildcard

Use an attribute selector:

button [class*="button-"] {
  margin-right: 2rem;  
}

Example Here

---

From MDN:

[attr*=value] - Represents an element with an attribute name of attr and whose value contains at least one occurrence of string "value" as substring.

button [class*="button-"] {  color: red;}

<button>    <span class="button-0">text</span>    <span class="button-1">text</span>    <span class="button-2">text</span></button>

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>

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

How do I wildcard match a class name inside querySelectorAll?

[class^="foo bar row-id"] will match what you're looking for. This searches for all class staring with .foo bar row-id. You can swap class for any other HTML attribute as well.

[class$="foo bar row-id"] will match class ending with your query.

[class*="foo bar row-id"] will match all class that contains your query.

Example:

var items = document.querySelectorAll('[class^="foo bar row-id"]');

CSS Wildcard element name selection

No. Only attribute selectors have any kind of wildcard syntax in CSS.

It sounds like your XML application design might be better off using fewer types and using attributes to distinguish between subsets of them.

How to use wildcard in CSS and recognize attribute as own selector

In order to trigger the hover on all elements with the same class and still retain a very general CSS without hundreds of classes (you still need them in your HTML), you can simpply use the class attribute of the currently hovered element to target all elements with that class:

$("[class^='linked']").on('mouseenter', function() {
    $( '.' + $(this).attr('class') ).addClass('hovered');
}).on('mouseleave', function() {
    $("[class^='linked']").removeClass('hovered');
});

$("[class^='linked']").on('mouseenter', function() {
    $( '.' + $(this).attr('class') ).addClass('hovered');
}).on('mouseleave', function() {
    $("[class^='linked']").removeClass('hovered');
});

th {
  background: lightblue;
}

th, td {
  padding: 5px 10px;  
}

[class^="linked"].hovered {
  background: rgba(0, 200, 0, 0.5);
}

[class^="linked"] {
  background: rgba(0, 200, 0, 0.1);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <thead>
    <tr>
      <th>00</th>
      <th>01</th>
      <th>02</th>
      <th>03</th>
      <th>04</th>
      <th>05</th>
      <th>06</th>
      <th>07</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="linked1">00</td>
      <td class="linked1">6D</td>
      <td class="linked2">64</td>
      <td class="linked1">74</td>
      <td class="linked1">4D</td>
      <td class="linked1">6F</td>
      <td class="linked2">20</td>
      <td>2B</td>
    </tr>
    <tr>
      <td class="linked1">2F</td>
      <td class="linked2">76</td>
      <td class="linked1">30</td>
      <td>73</td>
      <td>0D</td>
      <td class="linked1">0A</td>
      <td class="linked2">C2</td>
      <td class="linked3">00</td>
    </tr>
  </tbody>
</table>

---

Related Topics