CODEWITHSUNDEEP
htmlcsscss-selectors
Urbycoz
Urbycoz

Reputation: 7421

How can I select all elements except those inside divs with particular classes

I'd like to find a way to select all the makes of cars except those that are inside a div with the class discontinued or scrapped. Here's my markup:

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>

As you can see above, I tried the following:

div:not(.discontinued):not(.scrapped) > .make

...but this still included FORD, SEAT, and BMW.

Upvotes: 1

Views: 277

Answers (2)

Akhil M S
Akhil M S

Reputation: 1

Why don't you try this style code,

div.make:not(.discontinued .make):not(.scrapped .make) {
   color: green;
}

Upvotes: -1

chazsolo
chazsolo

Reputation: 8439

Unfortunately CSS selectors cannot traverse up parent elements, so if you are just trying to style them differently you may want to reverse your thought process and select ones that are .discontinued or .scrapped and apply overriding styles:

.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>

Upvotes: 2

Related Questions