मैं उन कारों को छोड़कर सभी प्रकार की कारों का चयन करने का एक तरीका खोजना चाहता हूं जो कक्षा discontinued
या scrapped
के साथ एक div के अंदर हैं। यहाँ मेरा मार्कअप है:
div:not(.discontinued):not(.scrapped) > .make {
color: green;
}
<div class="car">
<div class="make">NISSAN</div>
<div class="model">MICRA</div>
</div>
<div class="discontinued">
<div class="car">
<div class="make">FORD</div>
<div class="model">MONDEO</div>
</div>
</div>
<div class="scrapped">
<div class="car">
<div class="make">SEAT</div>
<div class="model">IBIZA</div>
</div>
</div>
<div class="scrapped">
<div class="preowned">
<div class="car">
<div class="make">BMW</div>
<div class="model">100</div>
</div>
</div>
</div>
<div class="car">
<div class="make">HONDA</div>
<div class="model">INTEGRA</div>
</div>
</div>
<div class="car">
<div class="make">PEUGEOT</div>
<div class="model">206</div>
</div>
<div class="car">
<div class="make">TOYOTA</div>
<div class="model">COROLLA</div>
</div>
जैसा कि आप ऊपर देख सकते हैं, मैंने निम्नलिखित कोशिश की:
div:not(.discontinued):not(.scrapped) > .make
...लेकिन इसमें अभी भी FORD
, SEAT
, और BMW
शामिल हैं।
1
Urbycoz
25 अक्टूबर 2019, 18:44
1 उत्तर
सबसे बढ़िया उत्तर
दुर्भाग्य से CSS चयनकर्ता मूल तत्वों का पता नहीं लगा सकते हैं, इसलिए यदि आप उन्हें अलग ढंग से स्टाइल करने की कोशिश कर रहे हैं तो आप अपनी विचार प्रक्रिया को उलट सकते हैं और उन लोगों को चुन सकते हैं जो हैं .discontinued
या .scrapped
और ओवरराइडिंग स्टाइल लागू करें:
.model {
padding-left: 10px;
}
.make {
color: green;
}
.scrapped .make,
.discontinued .make {
color: red;
}
<div class="car">
<div class="make">NISSAN</div>
<div class="model">MICRA</div>
</div>
<div class="discontinued">
<div class="car">
<div class="make">FORD</div>
<div class="model">MONDEO</div>
</div>
</div>
<div class="scrapped">
<div class="car">
<div class="make">SEAT</div>
<div class="model">IBIZA</div>
</div>
</div>
<div class="scrapped">
<div class="preowned">
<div class="car">
<div class="make">SEAT</div>
<div class="model">IBIZA</div>
</div>
</div>
</div>
<div class="car">
<div class="make">HONDA</div>
<div class="model">INTEGRA</div>
</div>
<div class="car">
<div class="make">PEUGEOT</div>
<div class="model">206</div>
</div>
<div class="car">
<div class="make">TOYOTA</div>
<div class="model">COROLLA</div>
</div>
2
chazsolo
25 अक्टूबर 2019, 16:10