Один класс CSS зависит от другого

Question

Я знаю, что это простой вопрос.

Если я два класса CSS:

.cssclass1 { ...some element .... }
.cssclass2 { ...some element .... } 

и я хочу использовать их в поле ввода:

<input type="text" class="cssclass1 cssclass2" />

как я могу связать это так, что cssclass2 рендерится, только если он находится в том же элементе, что и cssclass1?

Answer 1

С селектором, написанным так:

.cssclass1.cssclass2 { ... }

... вы сможете настроить список правил, которые будут применяться, только если элемент имеет ОБА классы.

Answer 2

Чистый CSS:

.cssclass2 {
  display: none;
}

.cssclass2.cssclass1 {
  display: block;
}

SCSS:

.cssclass2 {
  display: none;

  &.cssclass1 {
    display: block;
  }
}

Answer 3

.cssclass1.cssclass2 {
    //...
}

делает именно то, что вы хотели сделать.

Для вашей записи это:

#foo.bar

выбирает тег, который имеет foo в качестве идентификатора и bar в качестве класса. Первый решает вашу актуальную проблему, но не мешает узнать и о втором.

Answer 4

Использовать этот:

.cssclass1.cssclass2 { ...some element .... }