0

html:

    <div class="active">
        <div class="container">

            <div class="diactive">
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
            </div>

            <div class="cont">
                <div class="item"></div>
            </div>

            <div class="cont">
                <div class="item"></div>
            </div>

            <div class="cont">
                <div class="item"></div>
            </div>                

    </div>

кейс: есть классactive, в котором всем элементам должны навешиваться заданные мной стили. НО не должны навешиваться внутри блока с классом diactive

что-то подобное, но это не работает:

.active *:not(.diactive) .item {
            border: .2px solid red;
        }

как корректно задать правило?

3 ответа 3

2

Если рассматривать именно тот вариант вёрстки, который вы указали, то работать будет так:

.active .item {
    border: .2px solid red;
}

.active .diactive .item {
    border: .2px solid grey;
}
<div class="active">
    <div class="container">
        <div class="diactive">
            <div class="item">diactive 1</div>
            <div class="item">diactive 2</div>
            <div class="item">diactive 3</div>
            <div class="item">diactive 4</div>
        </div>
        <div class="cont">
            <div class="item">active 1</div>
        </div>
        <div class="cont">
            <div class="item">active 2</div>
        </div>
        <div class="cont">
            <div class="item">active 3</div>
        </div>
    </div>
</div>

Либо же, если взять за основу приведённое вами описание стилей, то можно сделать так:

.active *:not(.diactive) .item {
    border: .2px solid red;
}

.active .diactive .item {
    border: .2px solid grey;
}
<div class="active">
    <div class="container">
        <div class="diactive">
            <div class="item">diactive 1</div>
            <div class="item">diactive 2</div>
            <div class="item">diactive 3</div>
            <div class="item">diactive 4</div>
        </div>
        <div class="cont">
            <div class="item">active 1</div>
        </div>
        <div class="cont">
            <div class="item">active 2</div>
        </div>
        <div class="cont">
            <div class="item">active 3</div>
        </div>
    </div>
</div>

Есть ещё один вариант, который, возможно, вам подойдёт. Однако использовать такие селекторы я бы рекомендовал с большой осторожностью, так как сами по себе они являются не самыми очевидными, а результат их использования очень сильно зависит от структуры ваших узлов:

.active * ~ :not(.diactive) > * {
    border: .2px solid red;
}
<div class="active">
    <div class="container">
        <div class="diactive">
            <div class="item">diactive 1</div>
            <div class="item2">diactive 2</div>
            <div class="item3">diactive 3</div>
            <div class="item4">diactive 4</div>
        </div>
        <div class="cont">
            <div class="item">active 1</div>
        </div>
        <div class="cont">
            <div class="item">active 2</div>
        </div>
        <div class="cont">
            <div class="item">active 3</div>
        </div>
    </div>
</div>

На самом же деле, хоть играть с селекторами и весело, но всё же в таких ситуациях хочется предложить пересмотреть концепцию приложения, в котором возникла потребность, описанная в вопросе. Возможно (скорее всего), существуют более простые способы достижения цели, стоящей перед вами.

Например, самый простой вариант - указывать класс active явно для каждого блока:

.active {
    border: .2px solid red;
}
<div class="container">
    <div class="cont">
        <div class="active item">active 1</div>
    </div>
    <div class="cont">
        <div class="item">diactive 1</div>
    </div>
    <div class="cont">
        <div class="active item">active 2</div>
    </div>
</div>

Не бойтесь ставить под сомнения готовые структуры и решения. Экспериментируйте и у вас обязательно получиться!

Удачи!

3
  • Дело в том, что стили у блоков внутри .diactive неизвестны. Они будут разные 22 мая 2019 в 11:23
  • @IlyaNikulin вы имеете в виду, что внутри блока с классом diactive могут находиться блоки с другими классами, а не только item - я правильно понимаю?
    – x-foby
    22 мая 2019 в 11:34
  • @IlyaNikulin я добавил ещё один вариант, попробуйте
    – x-foby
    22 мая 2019 в 12:03
0

Попробуйте этот вариант:

.active .item {
   /* Ваш стиль */
}

.active .item .diactive {
     border: .2px solid red;
}
0

Я бы попробовал так >>

.active {
background-color: green;
color: orange;
}

.active .diactive .item {
background-color: red;
color: black;
}



 <div class="active">
    <div class="container">
        <div class="diactive">
            <div class="item">d</div>
            <div class="item">f</div>
            <div class="item">g</div>
            <div class="item">h</div>
        </div>

        <div class="cont">
            <div class="item">2</div>
        </div>

        <div class="cont">
            <div class="item">5</div>
        </div>

        <div class="cont">
            <div class="item">6</div>
        </div>                

</div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.