How can I select all elements except those inside a particular div

Question

Here's my markup:

 <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="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>

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.

I tried the following:

div:not(.discontinued) .make

...but this still included FORD.

Answer 1

Select all .car except within .discontinued(you can do it by using :not pseudo-class selector and direct child selector ) and then select all .make within it.

:not(.discontinued) > .car .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="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>