0

Is it possible in css to select all dl with a dt, but which does not contain a dd?

<dl>
    <dt>Select this dl</dl>
</dl>
<dl>
    <dt>and this one</dl>
</dl>
<dl>
    <dt>But don't</dl>
    <dd>select this dl</dd>
</dl>
<dl>
    <dt>nor</dl>
    <dd>this one</dd>
</dl>
<dl>
    <dt>...but do also select this one</dl>
</dl>

(I don't care about the empty dl case.)

EDIT: An old question about selecting parents from their children was suggested as a duplicate. Is there a CSS parent selector? That was correct 11 years ago, but is quite outdated now. The one answer given here so far also cites old info ("The reason they haven't introduced something of this nature was initially due to performance.")

Exactly this is in the CSS Selector level 4 spec, though it's not yet implemented in any browser according to caniuse. https://developer.mozilla.org/en-US/docs/Web/CSS/:has Also, from that MDN web doc,

"In earlier revisions of the CSS Selectors Level 4 specification, :has had a limitation that it couldn't be used within stylesheets. Instead, it could only be used with functions like document.querySelector(); this was due to performance concerns. This limitation has been removed because no browser implemented it that way. Instead, browsers currently only support the use of :has() within stylesheets."

For now, document.querySelectorAll('dl.hideEmpty:not(:has(dd))') is not yet implemented, nor will dl.hideEmpty:not(:has(dd)) work yet in a stylesheet; I'll eventually be able to move it there, but in the meantime I'm using $('dl.hideEmpty:not(:has(dd))').hide(); to get the same effect, as it is already implemented in jQuery.

TLDR; the right answer is NOT "it can't be done". The right answer is "It is in the spec, but browsers and browser implementations of document.querySelectorAll don't yet support it, though jQuery already does."

BrianFreud
  • 5,614
  • 5
  • 28
  • 47
  • 1
    If you don't want to use JS, then you will have to use classes. – Bingostew Sep 03 '20 at 19:54
  • *That was correct 11 years ago* then you said * though it's not yet implemented in any browser* --> so what is correct 11 years ago is still correct today – Temani Afif Sep 03 '20 at 22:40
  • it cannot be done AND browser aren't implementing a feature is the same conclusion .. you cannot do something either if doesn't exist or only exist in *minds* – Temani Afif Sep 03 '20 at 22:41
  • "Browsers aren't" and "browsers have not yet" are not the same thing. – BrianFreud Sep 03 '20 at 23:19

1 Answers1

0

Unfortunately, you can't traverse up the DOM in CSS. You would need to go forwards, and then backwards to the parent which isn't possible. JavaScript would be needed for that. The reason they haven't introduced something of this nature was initially due to performance.

Bjorn.B
  • 886
  • 5
  • 10