CSS имеет функцию, которая не работает, и не имеет селектора элементов

У меня есть следующая структура элемента:

<div class = "general">

    <div class = "general-container">

        <div class = "general-grid">

            <div class = "general-wrapper"></div>

        </div>

    </div>

</div>

Я пытаюсь не отображать общий div, если у общей оболочки нет дочерних элементов.

Итак, сначала попробовал это:

.general-wrapper:not(:has(*)) {
background-color:red;
}

Это работает.

Тогда это:

.general-container:has( .general-wrapper ) {
background-color:green;
}

Что тоже работает.

Но когда я их объединяю, этого не происходит.

.general-container:has( .general-wrapper:not(:has(*) ) ) {
display:none; // it does display, while it should not :(
}

ссылка на код: https://codepen.io/Redox-FGL/pen/LYKgZzq

Что я делаю не так или не получаю?

Примечание: не ищите решение с пустым, здесь больше переменных и пустой не работает. Необходимо проверить дочерние элементы.

Developer.mozilla.org/en-US/docs/Web/CSS/:has#syntax: «Псевдокласс :has() не может быть вложен в другой :has()».

— 02.09.2024 11:49

Спасибо @C3roe за эту ссылку, это многое объясняет!

— 02.09.2024 12:17

html css

02.09.2024 11:38

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Вместо этого сделайте это:

.general-container:not(:has(.general-wrapper > *)) {
  border: 2px solid red;
  height: 100px;
}

<div class = "general">

  <div class = "general-container">

    <div class = "general-grid">

      <div class = "general-wrapper">
      </div>

    </div>

  </div>

</div>

Можете ли вы показать, что это работает? Возможно, добавьте тот, в котором ЕСТЬ контент.

— 02.09.2024 11:52

Могу подтвердить, я был в 2 секундах от того же ответа. codepen.io/Paulie-D/pen/oNraLQK

— 02.09.2024 11:54

Спасибо! Эта работа

— 02.09.2024 12:17

02.09.2024 11:51

Вы можете установить для параметра General-Container значение «Нет отображения», а затем установить для него значение «Отображение блока», например, если в оболочке есть контент.

/* don't display general when general-wrapper has no children */


/* so display general when it does have children,otherwise display: none */

.general {
  display: none;
  width: 200px;
  height: 200px;
  background: pink;
}

.general:has(.general-wrapper > *) {
  display: block;
}

<h2>WITHOUT CONTENT</h2>
<div class = "general">

  <div class = "general-container">

    <div class = "general-grid">

      <div class = "general-wrapper">
      </div>

    </div>

  </div>

</div>
<h2>WITH CONTENT</h2>
<div class = "general">

  <div class = "general-container">

    <div class = "general-grid">

      <div class = "general-wrapper">
        <div></div>
      </div>

    </div>

  </div>

</div>

02.09.2024 11:57

Другие вопросы по теме

Как использовать обратный радиус границы в верхней части карты? (ССС)

Как я могу перевернуть все элементы флексбокса в CSS?

Как я могу создать пунктирную линию из двух цветов: серого и светло-серого?

Как сделать заголовки таблиц липкими при горизонтальной прокрутке?

Как исправить элементы div на краю большего элемента div

Как отобразить текст поверх изображения без отображения цвета фона

Как настроить ширину отображаемых диаграмм Mermaid в зависимости от размера экрана в Obsidian?

Как я могу переопределить поле родительского элемента в дочернем элементе в CSS (класс и идентификатор)?

Почему меню перекрывает значок гамбургера?

Как сделать так, чтобы панель поиска располагалась вертикально?

CSS имеет функцию, которая не работает, и не имеет селектора элементов

Ответы 2

Другие вопросы по теме

Похожие вопросы