Is there a CSS selector by class prefix

Question

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     lt div id  A  class  foo-class status-important bar-class  gt  lt  div gt   lt div id  B  class  foo-class bar-class  gt  lt  div gt   lt div id  C  class  foo-class status-low-priority bar-class  gt  lt  div gt    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

User · Answer

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    lt html gt   lt head gt   lt title gt Test Page lt  title gt   lt style type  text css  gt  div class  status    background-color red     lt  style gt   lt  head gt   lt body gt   lt div id  A  class  status-important bar-class  gt A lt  div gt   lt div id  B  class  bar-class  gt B lt  div gt   lt div id  C  class  status-low-priority bar-class  gt C lt  div gt    lt  body gt   lt  html gt    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

User · Answer

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

User · Answer

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-    gt  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

User · Answer

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    lt div id  D  class  foo-class foo-status-bar bar-class  gt  lt  div gt    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

[css] Is there a CSS selector by class prefix?

Examples related to css

Examples related to css-selectors