Is it possible to use a CSS wildcard in the middle of an attribute selector?

Question

I have some generated CSS and would like to use some css that could select e.g.

<p id="loremIndexIpsum">Text in here</p> 

Using on lorem and Ipsum disregarding Index. Something similar to:

p#lorem*Ipsum { } 

I can generate some more classes, but wondered if this was possible with CSS.

Answer 1

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