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

css css-selectors wildcard
StuperUser picture StuperUser · Jul 29, 2011 · Viewed 18.2k times · Source

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

BoltClock picture BoltClock · Jul 29, 2011

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

Related questions

wildcard * in CSS for classes

I have these divs that I'm styling with .tocolor, but I also need the unique identifier 1,2,3,4 etc. so I'm adding that it as another class tocolor-1. <div class="tocolor tocolor-1"> tocolor 1 </div> <div class="tocolor …

Read More
CSS hide all images with matching SRC attribute

Is it possible to create a CSS rule that would apply a style to any IMG tag with a SRC that contained a specific string, say "hideme"? For instance, if I had the following 3 images on a page it would …

Read More
Is there a CSS parent selector?

How do I select the <li> element that is a direct parent of the anchor element? As an example, my CSS would be something like this: li < a.active { property: value; } Obviously there are ways of doing …

Read More