CODEWITHSUNDEEP
jqueryhtmlcss
Svetoslav
Svetoslav

Reputation: 99

How to apply CSS style to class which is in another classes?

I have the following HTML elements:

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

I want to apply style to innerClass which is in classes : class1, class2 , class3 no more no less. I mean if there is innerClass in element with classes class1, class2 the style should't be applied and if I have innerClass in element with classes class1, class2 , class3 , class4 it shouldn't be applied either.

Upvotes: 6

Views: 2509

Answers (5)

Aziz
Aziz

Reputation: 7793

You can do this with the CSS Attribute selector

The [attribute] selector is used to select elements with a 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>

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

Edit: As pointed about in the comments by Sidney Liebrand, this approach assumes that the order of the classes is exact and therefore will not work when the order is the following: class="class2 class3 class1". One way to solve this is to just add each order combination possible in the rule, like so:

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 not efficient at all so you'll have to make sure the order is correct or resort to a javascript solution.

Upvotes: 10

L777
L777

Reputation: 8517

Here it is. There is an issue, that you can notice on the 3rd square 'same mixed': it only works if the classes are writen on this 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>

Upvotes: 1

A. Wolff
A. Wolff

Reputation: 74410

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

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

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

Upvotes: 4

Chris Bier
Chris Bier

Reputation: 14455

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+

Upvotes: 1

Carol Skelly
Carol Skelly

Reputation: 362820

You'd combine the classes like this:

.class1.class2.class3 .innerClass {

}

Upvotes: 1

Related Questions