वर्ग का चयन करें कि स्ट्रिंग

Question

से शुरू नहीं होता मैं एक बच्चे के तत्व यह है कि एक वर्ग है कि z-depth- साथ शुरू होता है शामिल नहीं है का चयन करना चाहते:

<div class="well"> 
    <div class="well"></div> 
</div> 

तो यह है कि अगर आंतरिक .well भी z-depth-1 की तरह एक वर्ग निहित यह चुना नहीं जाएगा।

यह काम नहीं कर रहा है क्योंकि भीतरी .well हमेशा चयन किया जाता है:

.well .well:not([class^="z-depth-"]) 

है कि संभव है?

Answer 1

आप चाइल्ड तत्व है कि एक वर्ग है कि सीएसएस साथ z-depth- साथ शुरू होता है, आप केवल कर सकते हैं शामिल नहीं है नहीं चुन सकते हैं:

1. सभी चाइल्ड तत्व जिसका class विशेषता के मानों का चयन करें

.well .well:not([class^="z-depth-"]) { 
 
    color: red; 
 
}

<div class="well z-depth-1">Parent div 
 
    <div class="z-depth-2 well">First child div</div> 
 
    <div class="well z-depth-3">Second child div</div> 
 
</div>

: z-depth--स्ट्रिंग से शुरू नहीं है

1. सभी चाइल्ड तत्व जिसका class विशेषता के मानों z-depth--स्ट्रिंग शामिल नहीं है का चयन करें:

.well .well:not([class*="z-depth-"]) { 
 
    color: red; 
 
}

<div class="well z-depth-1">Parent div 
 
    <div class="z-depth-2 well">First child div</div> 
 
    <div class="well z-depth-3">Second child div</div> 
 
    <div class="well">Third child div</div> 
 
</div>

तुम भी कर सकते थे MDN पर सभी सीएसएस चयनकर्ताओं के बारे में और पढ़ें।

Answer 2

वांछित परिणाम प्राप्त करने के लिए आपको ^= और *= को गठबंधन करने की आवश्यकता होगी।

.well:not([class^="z-depth-"]) { /*will ignore elements if the first class is z-depth-* */ 
 
    background-color: lightgreen; 
 
} 
 
.well:not([class*=" z-depth-"]) { /*will ignore elements if z-depth-* is second class or later */ 
 
    background-color: skyblue; 
 
}

<div class="z-depth-1 well">z-depth-1 well</div> 
 
<div class="well z-depth-1">well z-depth-1</div>

यहाँ कैसे गुण चयनकर्ताओं का उपयोग करने पर एक nice guide है।