CSS rule to select an element which doesn't contain an element

Question

I have a bunch of elements that look like..

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

..except some of them don't have the footer element, only a head. I want to give elements without a footer a bottom border. I'm hoping for something like..

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

Is there a CSS selector I could use for this, or should I just use a JavaScript equivalent?

Answer 1

You can select elements that contain no other elements using the :empty selector, but what you need won't be available until CSS Selectors Level 4’s :has and :not(selector list) are both implemented in browsers. So no, it can't be done in pure CSS. Now whether or not you should use a JavaScript equivalent depends on what you really want to achieve here. If it's a minor detail, feel free to add it with JavaScript if it's not too much of a problem. If it's a huge, essential feature, consider restructuring so you don't need this kind of selector.