Hover behavior for a dt with multiple dds in CSS

Question

I'm referring to this question: Hover behavior for a dl list in CSS

The accepted answer will only highlight the first <dd> following a <dt>, but when there are multiple <dd>s only the first (adjacent) one is affected.

I've looked at the combinators: https://www.w3schools.com/css/css_combinators.asp but none really cover multiple <dd>s since they are not actually descendant or child elements of the <dt>.

Is there a CSS solution that will affect all <dd>s following a <dt>?

Is there a predictable limit to the number of dd's i.e. 5 or 6? — Jonathan Chaplin, Jan 06 '18 at 00:23
Probably 5 would cover it, but I'd prefer a solution than can account for an unknown number of `
`s. — Loren Maxwell, Jan 06 '18 at 00:28
I have a solution that will work with 5, but will try for the more generic solution. Are the classes unique on the dd's following the dts. i.e. firstDD, secondDD, etc?? — Jonathan Chaplin, Jan 06 '18 at 00:33
No, not unique in the way you mention. Currently I either don't have any classes on them or the classes are related to text alignment and such, but not the order of the dd. — Loren Maxwell, Jan 06 '18 at 00:39

Kosh · Accepted Answer · 2018-01-06T00:55:59.557

The key point is

/* change color of dd siblings of the hovered dt */
dt:hover ~ dd { 
  color: white;
}

/* set color:initial for dd siblings of dt siblings of the hovered dt */
dt:hover ~ dt ~ dd { 
  color: initial;
}

Please look at this snippet (I've updated the referred answer):

dl {
  overflow: hidden;
}

dt {
  height: 50em;
  margin-bottom: -48.8em;
  background: white;
}

dt:hover {
  background: #333;
  color: white;
}


dd {
  pointer-events: none;
}

dt:hover ~ dd {
  color: white;
}

dt:hover ~ dt ~ dd {
  color: initial;
}

<dl>
  <dt>Term 1</dt>
  <dd>1st Definition of term 1<br>&hellip;<br>&hellip;</dd>
  <dd>2nd Definition of term 1<br>&hellip;<br>&hellip;</dd>
  <dd>3rd Definition of term 1<br>&hellip;<br>&hellip;</dd>
  
  <dt>Term 2</dt>
  <dd>Definition of term 2<br>&hellip;</dd>
  
  <dt>Term3 </dt>
  <dd>Definition of term 3</dd>
</dl>

While technically correct, code-only answers aren't quite as useful. It would be nice if you would explain the [general sibling combinator](https://css-tricks.com/child-and-sibling-selectors/) — random_user_name, Jan 06 '18 at 00:45

score 1 · Answer 2 · answered Jan 06 '18 at 00:43

1

Try using an nth-of-type selector to select the dd's in combination with the generic sibling selector.

dt:hover,
dt:hover ~ dd:nth-of-type(1),
dt:hover ~ dd:nth-of-type(2), 
dt:hover ~ dd:nth-of-type(3) {
    background:#ddd;
}

answered Jan 06 '18 at 00:43

Jonathan Chaplin

2,442
1
18
21

Hover behavior for a dt with multiple dds in CSS

2 Answers2