Как я могу выбрать все элементы, кроме тех, которые внутри div с определенными классами - PullRequest
Новая
       31

Как я могу выбрать все элементы, кроме тех, которые внутри div с определенными классами

1 голос
/ 25 октября 2019

Я бы хотел найти способ выбрать все марки автомобилей, кроме тех, которые находятся внутри div с классом discontinued или scrapped. Вот моя разметка: 

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 Ответ

2 голосов
/ 25 октября 2019

К сожалению, селекторы 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>
...