234

I want to apply a CSS rule to any element whose one of the classes matches specified prefix.

E.g. I want a rule that will apply to div that has class that starts with status- (A and C, but not B in following snippet):

<div id='A' class='foo-class status-important bar-class'></div>
<div id='B' class='foo-class bar-class'></div>
<div id='C' class='foo-class status-low-priority bar-class'></div>

Some sort of combination of:
div[class|=status] and div[class~=status-]

Is it doable under CSS 2.1? Is it doable under any CSS spec?

Note: I do know I can use jQuery to emulate that.

0

4 Answers 4

481

It's not doable with CSS2.1, but it is possible with CSS3 attribute substring-matching selectors (which are supported in IE7+):

div[class^="status-"], div[class*=" status-"]

Notice the space character in the second attribute selector. This picks up div elements whose class attribute meets either of these conditions:

  • [class^="status-"] — starts with "status-"

  • [class*=" status-"] — contains the substring "status-" occurring directly after a space character. Class names are separated by whitespace per the HTML spec, hence the significant space character. This checks any other classes after the first if multiple classes are specified, and adds a bonus of checking the first class in case the attribute value is space-padded (which can happen with some applications that output class attributes dynamically).

Naturally, this also works in jQuery, as demonstrated here.

The reason you need to combine two attribute selectors as described above is because an attribute selector such as [class*="status-"] will match the following element, which may be undesirable:

<div id='D' class='foo-class foo-status-bar bar-class'></div>

If you can ensure that such a scenario will never happen, then you are free to use such a selector for the sake of simplicity. However, the combination above is much more robust.

If you have control over the HTML source or the application generating the markup, it may be simpler to just make the status- prefix its own status class instead as Gumbo suggests.

10
  • 1
    If for whatever strange reason you have a class called status- and you don't want to match that, the selector becomes even more complicated: div[class^="status-"]:not(.status-), div[class*=" status-"]:not(.status-) Plus you lose IE7/IE8 support. Thankfully, if your markup is sane, you won't need to exclude such a class.
    – BoltClock
    Oct 16, 2012 at 18:21
  • What is wrong with this: [class*=" anim-overlay-"] a:hover:after{...}. My CSS classes are anim-overlay-1, anim-overlay-2..... anim-overlay-8
    – M B Parvez
    Jul 20, 2016 at 19:18
  • 2
    @WebDevRon: You forgot the ^= part. If your class attribute is guaranteed to start with anim-overlay- then you probably don't need the *= part.
    – BoltClock
    Jul 21, 2016 at 4:03
  • Thank you. Another thing, can I use this .anim-overlay-*{...}?
    – M B Parvez
    Jul 21, 2016 at 9:25
  • 2
    @Daniel Compton: Thanks for the edit. I've been made aware in hindsight of how words like that can be condescending to someone for whom something might not be so obvious. I know some people really don't appreciate this sort of change, so I'm responding mostly to let you know that I do.
    – BoltClock
    Nov 19, 2018 at 3:37
22

CSS Attribute selectors will allow you to check attributes for a string. (in this case - a class-name)

https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors

(looks like it's actually at 'recommendation' status for 2.1 and 3)


Here's an outline of how I *think it works:

  • [ ] : is the container for complex selectors if you will...
  • class : 'class' is the attribute you are looking at in this case.
  • * : modifier(if any): in this case - "wildcard" indicates you're looking for ANY match.
  • test- : the value (assuming there is one) of the attribute - that contains the string "test-" (which could be anything)

So, for example:

[class*='test-'] {
  color: red;
}

You could be more specific if you have good reason, with the element too

ul[class*='test-'] > li { ... }

I've tried to find edge cases, but I see no need to use a combination of ^ and * - as * gets everything...

example: http://codepen.io/sheriffderek/pen/MaaBwp

http://caniuse.com/#feat=css-sel2

Everything above IE6 will happily obey. : )

note that:

[class] { ... }

Will select anything with a class...

3
  • 1
    [class*='test-'] will match elements such as <div class='foo-test-bar'>. That's the one edge case that requires combining ^ and * as described in my answer. And IE6 does not support attribute selectors.
    – BoltClock
    Sep 18, 2015 at 16:50
  • @BoltClock - thanks for clarifying! - I don't support < EI9 - and i would never write any classes that would step on each other - so for me this works. : ) Sep 18, 2015 at 20:30
  • 1
    It's funny when CSS Selectors return to Regex. Lol. I knew it wasn't a useless skill! Jan 5 at 18:30
5

This is not possible with CSS selectors. But you could use two classes instead of one, e.g. status and important instead of status-important.

1
  • 15
    Good idea about separating it into its own class, but it is possible with CSS selectors. See my answer.
    – BoltClock
    Dec 21, 2011 at 10:43
2

You can't do this no. There is one attribute selector that matches exactly or partial until a - sign, but it wouldn't work here because you have multiple attributes. If the class name you are looking for would always be first, you could do this:

<html>
<head>
<title>Test Page</title>
<style type="text/css">
div[class|=status] { background-color:red; }
</style>
</head>
<body>
<div id='A' class='status-important bar-class'>A</div>
<div id='B' class='bar-class'>B</div>
<div id='C' class='status-low-priority bar-class'>C</div>

</body>
</html>

Note that this is just to point out which CSS attribute selector is the closest, it is not recommended to assume class names will always be in front since javascript could manipulate the attribute.

2
  • 2
    yeah, thought of that. It might become an issue when jQuery gets into picture, since it might insert a class at the front.
    – THX-1138
    Jul 26, 2010 at 20:46
  • Yeah I'll edit my post to make it clear it clearly isn't a recommended way of doing it. If you have control over the class names then Gumbo's suggestion definitely would be the way to go (plus attribute selectors on older IE browsers is not supported).
    – SBUJOLD
    Jul 26, 2010 at 21:20

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.