Re: [whatwg] <di>? Please?

That's true for this specific case, but this doesn't work if you want multiple dt's to be "open" at a time, or any other case where you aren't using :focus (since focus goes away when you focus something else). That does take some JS intervention (you'd have to use a class or something rather than :focus) but it would be made much simpler by the existence of a combinator as Brennan describes.


I ran into a similar use case last week with a table that had "parent" and "child" rows where child rows were hidden by default and parent rows could be clicked to display or hide child rows, and wished for this exact thing.




Eli Morris-Heft

On Thu, Nov 27, 2014 at 10:08 AM, Edu Pascual <herenvardo@gmail.com>
wrote:

> Shouldn't this do the job?
> dd {
>     display:none;
> }
> dt:focus ~dd {
>     display:block
> }
> 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.
> Regards,
> Edu Pascual
> On 22 November 2014 at 00:16, Young, Brennan <Brennan.Young@laerdal.dk>
> wrote:
>> 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?
>>
>>
>>
>>
>>
>>
>>