发表新帖
发表新帖

Is there a CSS selector by class prefix?

后端 未结
关注
4 533
终归单人心
终归单人心 2020-11-22 05:08

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 wit

相关标签:
4条回答
  • 名媛妹妹
    2020-11-22 05:34

    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.

    0 讨论(0)
  • 隐瞒了意图╮
    2020-11-22 05:37

    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.

    0 讨论(0)
  • 夕颜
    2020-11-22 05:40

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

    0 讨论(0)
  • 盖世英雄少女心
    2020-11-22 05:48

    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.

    0 讨论(0)
 看不清?
提交回复
热议问题