如果element有特定的CSS类，也有任何其他类

Question

I can't believe I've never had to do this before in my long time writing CSS but this has me stumped.

I have span.item-name and I want to add some specific styles only if this element has another class, which could be ANY class.

I've tried span.item-name.* and it doesn't do the trick. Is this possible and what are my options?

Answer 1

you can use the attribute selector. (see: https://www.w3.org/wiki/CSS/Selectors#Attribute_Selector ) example:

 body>.item-name:before, b { content:'Class name is: 'attr(class)'. '; color:purple } p[class*="item-name"][class*=" "]:before { color:green; } p[class^="item-name"][class*=" "]:before { color:red; } 

 <p class="item-name"> The basic class</p> <p class="item-name another-class"> the basic class at first and then any other</p> <p class="another-class item-name any-more-class"> more than one class including <b>item-name</b> at any position</p> 

Answer 2

I think this is what you want, scroll until you see the CSS [attribute*="value"] Selector section. For you it should be something like:

span[class*=" item-name"], span[class*="item-name "]

Why two selectors? Because *= search for that specific value, so only with the first selector <span class="item-name another-class"> would not meet the criteria. That way you just search for the class, being unaware of its position in the class value.

Answer 3

Maybe some more code will help, but you can't write functions for css, which it sounds like what you are asking for. You can simply just add another class if you need to.

<span class="class1 class2">