Re: [whatwg] <di>? Please?

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 15:50:37 UTC