How to apply CSS style to a class that is in other classes?

Question

I have the following HTML elements:

<div class="class1 class2 class3"> <div class="innerClass"> </div> </div> 

I want to apply a style to innerClass , which is in classes: class1 , class2 , class3 nothing more. I mean, if the element with class1 , class2 has innerClass , the style should be applied, and if I have innerClass in the element with classes class1 , class2 , class3 , class4 it should not be applied either.

Answer 1

You can do this using the CSS Attribute Selector

The [attribute] selector is used to select elements with the specified attribute.

 div[class="class1 class2 class3"] .inner {padding:1em; background:red;} 

 <div class="class1 class2 class3"> <div class="inner"></div> </div> <div class="class1 class2 class3 class4"> <div class="inner"></div> </div> <div class="class3 class4"> <div class="inner"></div> </div> 

Link: https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors (added: Chris Bier )

---

Edit: As stated in Sidney Librann's comments, this approach assumes that the order of the classes is accurate and therefore will not work when the order is as follows: class="class2 class3 class1" . One way to solve this problem is to simply add each combination of orders to the rule, for example:

 div[class="class1 class2 class3"] .inner, div[class="class1 class3 class2"] .inner, div[class="class2 class1 class3"] .inner, div[class="class2 class3 class1"] .inner, div[class="class3 class1 class2"] .inner, div[class="class3 class2 class1"] .inner { padding:1em; background:red; } 

But, as you can see, this is inefficient , so you need to make sure that the order is correct or resort to a javascript solution.

Answer 2

If the order of the classes is quite randomized, you can filter it using:

 $('.class1.class2.class3').filter(function(){ return this.classList.length === 3; }).find('.innerClass').css({prop: value}); 

You can find polyfill for an older browser regarding support for classList or just split className .

Answer 3

You combine the classes as follows:

 .class1.class2.class3 .innerClass { } 

Answer 4

Aziz posted the best answer in my opinion, but here is another way to do it.

 .class1.class2.class3:not(.class4) .innerClass { /* Style here */ } 

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

This is only supported by IE9 +

Answer 5

Here he is. There is a problem that you may notice on the 3rd square: “the same mixed”: it only works if the classes are written in that order.

 div[class='class1 class2 class3'] > .innerClass { background-color: gold; } .innerClass { margin:5px; width:100px; height:100px; float:left } 

 <div class="class1 class2"> <div class="innerClass" style="outline:2px solid black">one class less</div> </div> <div class="class1 class2 class3"> <div class="innerClass" style="outline:2px solid black">exact classes</div> </div> <div class="class2 class3 class1"> <div class="innerClass" style="outline:2px solid black">same mixed</div> </div> <div class="class1 class2 class3 class4"> <div class="innerClass" style="outline:2px solid black">one class more</div> </div>