Можете ли вы применять правила CSS в CSS, если div не существует?

Возможно ли это с помощью CSS?

Примените это правило, если .div1 не существует:

.div2{
  property: value;  
}

как

<div class="div1">
...
</div>

<div class="div2">
 <!-- it exists, so do nothing -->
</div>

и

<div class="div2">
 <!-- it doesn't exist, apply the css -->
</div>

Ответы

Ответ 1

Если вы знаете стили "без стилей" div, вы можете использовать селектор sss для css для его стилизации одним способом, если он следует .div1, и "простой" способ, если он не делает - т.е.

.div2 {
    /* styled however you want */
}
.div1 + .div2 {
    /* 'plain' styling */
}

Посмотрите скрипту. Попробуйте удалить div1, чтобы увидеть div2, как это было бы стиле без div1

Ответ 2

Существует или не существует? Ваш вопрос меня смущает:)

Применить стиль к .div2, если .div1 существует:

Вариант 1: .div2 следует непосредственно после .div1

.div1 + .div2 {
  property: value;
}

Вариант 2: .div2 следует за .div1 как родной брат:

.div1 ~ .div2 {
  property: value;
}

Стиль .div2 без .div1:

Это немного взломать, но вы можете сделать обратное. Стиль .div2 обычно, а затем переопределить стиль с помощью селекторов выше.

Если .div1 не существует, .div2 получает нормальный стиль.

.div2 {
  background: #fff;
}

.div1 + .div2 {
  background: #f00; /* override */
}

/* or */

.div1 ~ .div2 {
  background: #f00; /* override */
}

Ответ 3

НЕТ

Только с CSS условия if, которые проверяют доступность элемента, невозможно. Вы должны использовать JavaScript, (рекомендуется jQuery).

Примечания. С помощью CSS вы можете проверить некоторые условия элемента, например, проверить, имеет ли элемент атрибут (например, input[type=text]), или проверяет, является ли элемент первым элементом списка (например, p:first-child), и т.д. Но вы не можете проверить что-либо из элементов элемента-элемента элемента или предков. Также вы не можете проверить отрицательные условия в большинстве случаев.

Ответ 4

Нет, это невозможно. Но вы можете создать класс "div3" и в вашем коде определить, существует ли DIV1 и в этом случае применять класс "div3" вместо "div2"

Ответ 5

Вообще говоря, нет, вы не можете этого сделать.

Но вы можете "взломать" его с помощью селекторов CSS, я имею в виду:

  • + .something селектор
  • ~ .something селектор

Я бы использовал второй селектор, который является селектором "общего родного брата".

Учитывая HTML, который вы опубликовали, вы можете применить стиль к классу .div2, а затем reset, используя селектор .div1 ~ .div2.

Так что-то вроде этого:

.div1 {
  color: red;
}

.div2 {
  color: blue;
}

.div1 ~ .div2 {
  color: black;
}

Таким образом, с первым фрагментом HTML div2 будет черным, а второй фрагмент будет синим.