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

Question

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

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

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

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

Есть ли селектор CSS я мог бы использовать для этого, или я должен просто использовать эквивалент JavaScript?

Answer 1

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

Answer 2

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