Come applicare lo stile CSS alla classe che si trova in un'altra classe?

Question

Ho i seguenti elementi HTML:

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

voglio applicare lo stile a innerClass che è in classi: class1, class2, class3 né più né meno. Voglio dire, se non v'è innerClass in elemento con le classi class1, class2 lo stile should't da applicare e se ho innerClass in elemento con le classi class1, class2, class3, class4 non dovrebbe essere applicata neanche.

Answer 1

Faresti combinare le classi in questo modo:

.class1.class2.class3 .innerClass { 

} 

Answer 2

Si può fare questo con il selettore di attributo CSS

Il [attributo] selettore viene usato per selezionare gli elementi con un determinato attributo.

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>

Riferimento: https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors (aggiunto di: Chris Bier)

---

Edit: Come sottolineato su nei commenti da Sidney Liebrand, questo approccio presuppone che l'ordine delle classi è esatta e quindi non funzionerà quando l'ordine è il f seguente: class="class2 class3 class1". Un modo per risolvere questo problema è quello di aggiungere solo ogni combinazione possibile ordine nella regola, in questo modo:

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; 
} 

Ma, come si può vedere, questo è non efficiente affatto così dovrete assicurarsi che il l'ordine è corretto o ricorrere a una soluzione javascript.

Answer 3

Aziz ha pubblicato la risposta migliore a mio parere, ma qui c'è un altro modo per farlo.

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

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

Questo è supportato solo da IE9 +

Answer 4

Se l'ordine delle classi è abbastanza randomizzato, si potrebbe filtrare utilizzando:

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

si potrebbe trovare polyfill per il browser più vecchi per quanto riguarda il supporto classList o semplicemente diviso className.

Answer 5

Eccolo. C'è un problema che puoi notare sul 3 ° quadrato 'same mixed': funziona solo se le classi sono scritte in questo ordine.

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>