मैं उन कारों को छोड़कर सभी प्रकार की कारों का चयन करने का एक तरीका खोजना चाहता हूं जो कक्षा 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