Стили для элементов с несколькими классами

Рейтинг: 0Ответов: 2Опубликовано: 24.07.2023

Всем привет!

Есть html-код:

<div class="one">бла-бла-бла</div>
<div class="one">бла-бла-бла</div>
<div class="one">бла-бла-бла</div>
<div class="one">бла-бла-бла</div>
<div class="one two">тра-та-та</div>
<div class="one two">тра-та-та</div>
<div class="one two">тра-та-та</div>
<div class="one two">тра-та-та</div>

Задача: скрыть на мобильных устройствах "бла-бла-бла".

Как собственно можно скрыть только элементы с классом "one"?

Если сделаю

.one {
    dislpay: none;
}

, то исчезнут и "тра-та-та", а нужно чтобы они остались. Помогите, пожалуйста.

css html
Источник: Stack Overflow на русском

Ответы

▲ 2Принят

Используйте :not() (документация):

.one:not(.two) {
  display:none;
}
<div class="one">бла-бла-бла</div>
<div class="one">бла-бла-бла</div>
<div class="one">бла-бла-бла</div>
<div class="one">бла-бла-бла</div>
<div class="one two">тра-та-та</div>
<div class="one two">тра-та-та</div>
<div class="one two">тра-та-та</div>
<div class="one two">тра-та-та</div>

▲ 1

Как собственно можно скрыть только элементы с классом "one"?

Предложу такой вариант...

[class="one"] {
    display: none;
}
<div class="one">бла-бла-бла</div>
<div class="one">бла-бла-бла</div>
<div class="one">бла-бла-бла</div>
<div class="one">бла-бла-бла</div>
<div class="one two">тра-та-та</div>
<div class="one two">тра-та-та</div>
<div class="one two">тра-та-та</div>
<div class="one two">тра-та-та</div>