सीएसएस शैली को कक्षा में कैसे लागू करें जो किसी अन्य कक्षा में है?

Question

मैं निम्नलिखित HTML तत्वों है:, class1, class2class3 कोई और अधिक कम नहीं:

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

मैं innerClass जो कक्षाओं में है करने के लिए शैली लागू करना चाहते हैं। मेरा मतलब है, अगर वहाँ वर्गों class1, class2 शैली के साथ तत्व में innerClass लागू किया जा should't और अगर मैं वर्गों class1, class2, class3, class4 साथ तत्व में innerClass है यह या तो लागू नहीं किया जाना चाहिए।

Answer 1

आप इस तरह की कक्षाओं गठबंधन चाहते हैं:

.class1.class2.class3 .innerClass { 

} 

Answer 2

आप सीएसएस गुण चयनकर्ता

[विशेषता] चयनकर्ता एक निर्दिष्ट के साथ तत्वों का चयन करने के लिए किया जाता है साथ ऐसा कर सकते विशेषता।

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>

संदर्भ: https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors (द्वारा कहा: Chris Bier)

---

संपादित करें: रूप Sidney Liebrand द्वारा टिप्पणी में के बारे में बताया, इस दृष्टिकोण मान लिया गया आदेश है कि कक्षाओं का सटीक है और इसलिए जब आदेश एफ होता है तो काम नहीं करेगा ollowing: class="class2 class3 class1"। इस को हल करने के एक तरीका यह सिर्फ शासन में प्रत्येक आदेश के संयोजन संभव जोड़ने के लिए है, इसलिए की तरह है:

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

लेकिन जैसा कि आप देख सकते हैं, यह है कुशल नहीं बिल्कुल ताकि आप सुनिश्चित करने के लिए होगा ऑर्डर सही है या जावास्क्रिप्ट समाधान का सहारा लेना है।

Answer 3

अज़ीज़ ने मेरी राय में सबसे अच्छा जवाब पोस्ट किया, लेकिन यह करने का एक और तरीका है।

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

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

यह केवल IE9 द्वारा समर्थित है +

Answer 4

हैं वर्गों के आदेश काफी बेतरतीब है, तो आप इसे का उपयोग फ़िल्टर कर सकते हैं:

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

आप पुराने ब्राउज़र के लिए polyfill मिल सकता है classList समर्थन के बारे में या सिर्फ className विभाजित करें।

Answer 5

यहां यह है। एक मुद्दा है, कि आप तीसरे वर्ग के 'समान मिश्रित' पर ध्यान दे सकते हैं: यह केवल तभी काम करता है जब कक्षाएं इस क्रम पर लिखी जाती हैं।

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>