Css Selector For Attribute Names Based on a Wildcard

CSS selector for attribute names based on a wildcard

No, there is no wildcarding for attribute names in CSS selectors. All attribute selectors contain a specific name of an attribute.

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.

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

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>

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

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>

Using the wildcard attribute selector in CSS

Yes, it's possible, just not quite the way you've done it. You need to move the delimiter (in your case, the "wildcard" asterisk) outside of your string declaration. There's also a better delimiter for what it looks like you're trying to select. Here's the right attr selector:

li[data-widget-type$="color"] {    color: orange;}

<ul>    <li>asdasd</li>    <li data-widget-type="red.color">asdasd</li>    <li data-widget-type="none.color">asdasd</li></ul>

Using wildcard attribute in css selector does not return any matches

To answer your question,

You should switch [href~="/product/"]

for [href^="/product/"] or [href*="/product/"]

~= being contains word (Not what you require) .

^= being starts with.

*= being contains substring.

Resulting in your css selector looking like this:

'a.a-link-normal[href^="/product/"] > img'

Css Selector For Attribute Names Based on a Wildcard