CSS selector for every <dd> under specific <dt>?

[Mampir]

Hi!

Is there a selector by which I can select every <dd> which is under a
specific <dt>, but not after any other <dt>?

Take this for example:

<dl>
<dt>red</dt>
<dd>pink</dd>
<dd>darkred</dd>

<dt class="collapse">green</dt>
<dd>lightgreen</dd>
<dd>darkgreen</dd>

<dt>blue</dt>
<dd>lightblue</dd>
<dd>darkblue</dd>
</dl>

In the example above, I want to select the "dd" elements under
"dt.collapse".

What I can do is:

dt.collapse + dd,
dt.collapse + dd + dd,
dt.collapse + dd + dd + dd {
display: none;
}

I wish there was a better selector. With a selector like the above
one, only a limited amount of elements can be selected, and it feels
like there could be a better way.

[Stanimir Stamenkov]

Fri, 7 Sep 2012 21:01:26 +0300, /Mampir/:

> [...]

> What I can do is:
>
> dt.collapse + dd,
> dt.collapse + dd + dd,
> dt.collapse + dd + dd + dd {
> display: none;
> }
>
> I wish there was a better selector. With a selector like the above
> one, only a limited amount of elements can be selected, and it feels
> like there could be a better way.

So you appear to look for General sibling selectors A ~ B:

https://developer.mozilla.org/en-US/docs/CSS/General_sibling_selectors

--
Stanimir

[Stanimir Stamenkov]

Fri, 07 Sep 2012 22:47:35 +0300, /Stanimir Stamenkov/:

Spoke too soon:

dt.collapse ~ dd

will also match:

dt.collapse ~ dt ~ dd

which is not you want, I guess.

--
Stanimir

[Mampir]

The sibling selector will select all dd elements in the list which are
after dt.collapse. Including the dd element under other td elements.

In the example "dt.collapse ~ dd" will select <dd>lightblue</dd> and
<dd>darkblue</dd>. That's not what I want.

[Stanimir Stamenkov]

Sat, 8 Sep 2012 00:46:55 +0300, /Mampir/:

Yes, I realized that immediately after sending my first reply. I
thought the following could work in you case:

dt.collapse + dd,
dt.collapse ~ :not(dt) ~ dd {
...
}

but it doesn't.

--
Stanimir