Is there a CSS selector by class prefix?

by

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.

More Related Contents:

  1. What does a space mean in a CSS selector? i.e. What is the difference between .classA.classB and .classA .classB?
  2. CSS selector for first element with class
  3. Is there a CSS selector for text nodes?
  4. Can CSS detect the number of children an element has?
  5. How do I select an element based on the state of another element in the page with CSS?
  6. Does the order of classes listed on an item affect the CSS?
  7. Select all child elements recursively in CSS
  8. CSS “and” and “or”
  9. Using the last-child selector
  10. Why doesn’t the selector h3:nth-child(1):contains(‘a’) work?
  11. What is the difference between :focus and :active?
  12. Can I have multiple :before pseudo-elements for the same element?
  13. How to select label for=”XYZ” in CSS?
  14. Are parentheses allowed in CSS selectors?
  15. What is the difference between pipe (|) and caret (^) attribute selectors?
  16. Can type selectors be repeated to increase specificity?
  17. What’s the difference between html[lang=”en”] and html:lang(en) in CSS?
  18. The use of /deep/ and >>> in Angular 2
  19. Zebra striping a table with hidden rows using CSS3?
  20. Select nth-child across multiple parents
  21. Combining :not() selectors in CSS
  22. Select an element with empty class attribute (class=””) using CSS?
  23. How do I target elements with an attribute that has any value in CSS?
  24. CSS select the first child from elements with particular attribute
  25. What does .container.\31 25\25 mean in CSS?
  26. Can you target an element with CSS only if 2 classes are present?
  27. nth-child for every two table rows
  28. nth-child doesn’t respond to class selector [duplicate]
  29. Why are my CSS properties being overridden/ignored?
  30. Shorten verbose CSS that repeats combinations of elements and pseudo-classes

Leave a Comment