Чистый CSS условный стиль - есть ли такая вещь? - PullRequest
Новая
       12

Чистый CSS условный стиль - есть ли такая вещь?

0 голосов
/ 30 октября 2018

Возможно ли без SASS, LESS, Javascript - просто чистый CSS сделать что-то похожее на: 

.B
{
    display: none;
}

.A:empty
{
     display: none;

     .B
     {
         display: block;
     }
}

Так что, когда класс 'A' пуст, делать что-то еще с контейнером 'B'? Или что, когда у класса 'A' есть какое-то состояние - сделать что-то еще с контейнером B?

Примеры: 

Hover A -> Hide B
Hide B -> Show C
C Empty -> Show D

Я пытался найти правильные термины для этих состояний, но еще ничего не нашел - есть ли такие?

Не зависит:

Я не хочу, чтобы классы зависели друг от друга. 

<div class="A"><div class="B"></div></div>

... это не решение. 

<div class="A"></div>
<div class="B">Show me when condition in A is reached<div>

С тех пор я могу просто делать все, что хотел. Я хочу, чтобы класс A находился в некоторой части страницы, а класс B - в другом контейнере, не относящемся к классу A.

Ответы [ 3 ]

0 голосов
/ 30 октября 2018

Нет, нет пути. Следующее условие может быть достигнуто, когда элемент имеет классы A и B. Другой способ - обернуть элементы этими классами в другой тег, например 

<div class="wrapper">
  <div class="A"></div>
  <div class="B"></div>
</div>

, затем выполните следующие действия в .css:

.wrapper.A:hover + .B {...}

0 голосов
/ 30 октября 2018

HTML: 

<div class="container">
  <div class="A">One</div>
  <div class="B">Two</div>
  <div class="C">Three</div>
  <div class="D">Four</div>
</div>

CSS: 

.container {
  position: relative;
}
.container > div {
  display: block;
  width: 100px;
  height: 100px;
  position: absolute;
  transition: 200ms all;
}
.A {
  left: 10px;
}
.B {
  left: 120px;
}
.C {
  left: 230px;
}
.D {
  left: 340px;
}
.A:hover ~ .B {
  background-color: green;
}
.A:hover ~ .C {
  opacity: 0;
}
.A:hover ~ .D {
  transform: rotate(-45deg);
}
.B:hover ~ .C {
  background-color: green;
}
.B:hover ~ .D {
  opacity: 0;
}

Рабочая демонстрация: Селектор брата

0 голосов
/ 30 октября 2018

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

...