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

Question

Возможно ли это с помощью 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>

Answer 1

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

---

Применить стиль к .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 */
}

Answer 2

Если вы знаете «не стилизованные» стили div, вы можете использовать селектор брата css, чтобы стилизовать его одним способом, если он следует .div1, и «простым» способом, если нет - то есть

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

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

Answer 3

NO

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

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

Answer 4

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

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

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

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

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

Примерно так:

.div1 {
  color: red;
}

.div2 {
  color: blue;
}

.div1 ~ .div2 {
  color: black;
}

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

Answer 5

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