CSS Профессиональная выборка соседних элементов одного родителя?

Question

Есть вот такой пример:

.bl {
  position: relative;
  width: 100px;
  height: 100px;
  border: 1px solid #000;
}

.showInThisBlock:after {
  content: "show tips";
  position: absolute;
  right: -100%;
  top: 0;
  z-index: 2;
}

.ifThisEmpty:empty .wrapper+.showInThisBlock:after {
  content: "Block ifThisEmpty don't have children"
}

<div class="parent">
  <div class="wrapper">
    <div class="ifThisEmpty bl"></div>
  </div>
  <div class="showInThisBlock bl">2</div>
</div>

Вопрос -есть ли возможность вывода сообщения в .showInThisBlock:after если предыдущий встроенный потомок не содержит детей ? (Этот пример работает корректно если нету div обертки .wrapper) Возможно ли как-то CSS передать значение... ? .parent то для них общий...

Answer 1

.paretn общий, но не является родителем, а является предком, так что только js или убрать .wrapper

Нет пока возможности с помощью css обратиться к детям элемента и этому элементу прописать стиль или выбрать соседний от него. Также нельзя у детей проверить родителя.

Еще есть селектор :has(), который бы подошел для решения этой задачи, но он не поддерживается браузерами.

Answer 2

Нельзя, сейчас для css они должны быть сестринскими.

Тем не менее, раз уж используется псевдоэлемент, скорее всего его можно приделать непосредственно пустому блоку и как-то перепозиционировать желаемым образом. Ну или проще всё-таки от wrapper'а избавиться, раз уж он оборачивает единственный элемент.

А вообще, когда-то должен появиться псевдокласс :has:

.wrapper:has(> :empty) + .showInThisBlock:after {

но пока ни один браузер такое не поддерживает.

БЛОГ НА HUSL

CSS Профессиональная выборка соседних элементов одного родителя?

Ответы (2 шт):