Правило CSS для выбора элемента, который не содержит элемент

Question

У меня есть куча элементов, которые выглядят как ..

<div id="hi">
    <div class="head">
    </div>
    <div class="footer">
    </div>
</div>

.. за исключением того, что у некоторых из них нет элемента нижнего колонтитула, только голова. Я хочу дать элементам без нижнего колонтитула нижнюю границу. Я надеюсь на что-то вроде ..

#hi:hasno(.footer) {
    border-bottom: 1px black dotted;
}

Можно ли использовать для этого селектор CSS или просто использовать эквивалент JavaScript?

Answer 1

В зависимости от ситуации с вашим фоном, вы можете навсегда установить границу на #hi, а затем наложить ее на footer, задав footer либо margin-bottom: -1px или position: relative; bottom: -1px; и скрыв границу, когданижний колонтитул присутствует.

Answer 2

Вы можете выбрать элементы, которые не содержат других элементов, используя селектор :empty, но то, что вам нужно, не будет доступно до CSS4.Так что нет, это не может быть сделано в чистом CSS.Теперь, следует ли вам использовать эквивалент JavaScript, зависит от того, чего вы действительно хотите достичь здесь.Если это мелкая деталь, не стесняйтесь добавлять ее с помощью JavaScript, если это не слишком большая проблема.Если это огромная важная функция, рассмотрите возможность реструктуризации, чтобы вам не требовался этот тип селектора.