W3C home > Mailing lists > Public > www-style@w3.org > November 2014

Re: [whatwg] <di>? Please?

From: Edu Pascual <herenvardo@gmail.com>
Date: Thu, 27 Nov 2014 17:05:46 +0100
Message-ID: <CACb57T0+av-DQn6HwydNOEqfYvHtu5T1AtKYUO7bzSeOHtVd_Q@mail.gmail.com>
To: "Young, Brennan" <Brennan.Young@laerdal.dk>
Cc: "www-style@w3.org" <www-style@w3.org>
Shouldn't this do the job?

dd {
dt:focus ~dd {
dt:focus ~ dt ~ dd {
    /* Hides again any dd that follows a dt that follows the focused dt */
    display: none;

The feature you are suggesting sounds interesting, but your use case seems
to be solved by already existing features.

Edu Pascual

On 22 November 2014 at 00:16, Young, Brennan <Brennan.Young@laerdal.dk>

> Just run into a problem which I expected to be relatively common, but
> apart from this thread, I have found little discussion about it, or any
> indication that the proposed CSS level 4 selectors will present a solution.
> Ian Hickson wrote "(Though really, how often do you have a collapsible
> dt/dd group that has  more than one dt or dd?)"
> .... not often, but it's a valid case. I am sitting with exactly such a
> case right now.
> For example, I have a quite large definition list with hundreds of
> entries. In this case, dt appears only once for each entry, but there are
> multiple (and variable numbers of) dds.  Something like this:
> <dl>
>     <dt>Foo</dt>
>     <dd>Egg Foo Yung</dd>
>     <dd>Football</dd>
>     <dd>Foolishness</dd>
>     <dt>Bar</dt>
>     <dd>Barry Manilow</dd>
>     <dd>Barchester Chronicles</dd>
> </dl>
> I want the dds to be hidden. I'd like to be able to click on (or tab
> through to) a dt, giving it focus, and then its corresponding dds should
> become visible.
> I hoped to do
> dd {
>     display:none;
> }
> dt:focus ~dd {
>     display:block
> }
> .... but this will show *all* subsequent dds after the focused dt.
> It's been suggested that I give a class to each 'group' of dts and dds,
> which works today, but this will bloat my css file in proportion to the
> length of the list. I mentioned that the list is very long? There are also
> multiple documents with comparably long lists, and I want them to share the
> same css file. So, the class/id solution is not great.
> dt:focus + dd and variants with additional + selectors are not good
> because I don't know how many dds there will be.
> One solution proposed here is to add markup, either by permitting div or
> li inside dl, or by introducing the mooted di (the subject line of this
> thread).
> But this seems messy, considering that the browser already knows how to
> associate dts with dds. So I agree with the view that this should be solved
> in css, not in markup.
> (I will use a javaScript workaround today, of course, but this is a
> presentation issue, and therefore CSS should be able solve it).
> What I am looking for is a selector, somehow similar to the sibling
> selectors ~ or +, but which 'stops' selecting siblings when an element of a
> different type appears.
> In this case it might select all subsequent dds until something that is
> not a dd appears.
> jQuery's nextUntil() offers something similar. That feature would not have
> been added if there were no use case for it.
> I suppose it might otherwise be imagined as a kind of 'contiguous'
> selector'. Select one element, and all contiguous sibling elements of the
> same type will get selected.
> Could also be used to select all paragraphs following a heading, up until
> the next non-paragraph etc.
> Obviously not a formal proposal, but does this appear reasonable? Are
> there any other fantasies?
Received on Thursday, 27 November 2014 16:06:33 UTC

This archive was generated by hypermail 2.4.0 : Friday, 25 March 2022 10:08:48 UTC