How to Use a CSS Wildcard in the Middle of an Attribute Selector

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>

CSS attribute selector, multiple classes, wildcards applied to one class definition possible?

Sorry, this is not doable with selectors alone given your current situation. Attribute selectors don't have a way of using wildcards in the middle of a value nor can they allow checking of individual components in a space-separated attribute, nor do class selectors provide such functionality. You could consider this a design flaw of AngularJS or one of CSS, but whatever it is, it's not doable with a pure CSS selector.

You will have to work around this a different way. As mentioned in the comments, you can easily hook on to ng-class to add custom classes to make selecting easier, or as suggested in another answer, consider using data attributes to store validation information instead.

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

Javascript selector with wildcard

You can use a combination of multiple attribute selectors.

If you want to select all elements where the attribute aria-describedby starts with a certain string you can first select it using the ^= operator. Combining with the $= operator you can limit the selection even further and define how the end of the attribute should look like.

const prefix = 'gridx_Grid_';const suffix = '-9';
const collection = document.querySelectorAll(  `[aria-describedby^="${ prefix }"][aria-describedby$="${ suffix }"]`);
collection.forEach( element => console.log( element.innerText ) );

<div aria-describedby="gridx_Grid_13-9">Text 1</div><div aria-describedby="gridx_Grid_10-10">Text 2</div><div aria-describedby="gridx_Grid_11-9">Text 3</div>

Using the wildcard CSS selector

You can use this instead:

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

The space at the start ensures that it doesn't match something like xyzcontrol-34689, only something like xyz control-34689.

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

<div class="menu-523673 control-34689">Red text</div>

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.