Styling definition lists

I was thinking about the use of definition lists … more specifically the case where one would like to highlight a whole definition ( that is ALL encompassing DTs and DDs). Imagine, for example that you have made a catalog page, and hovering on the name of a product, it’s picture or any of its description turns the whole section background pink. Essentially the DL of an LI:hover.

Doing a DT:hover, DT:hover+DD … is iffy, as it starts to break down if you have more than one DT/DD and there is on way for the CSS to go up the DOM structure ( so that if someone hovers one of the DDs the corresponding DTs are highlighted)

I almost thought about making a UL with each LI containing a DL with a single definition. whit this would validate… it seams to defeat the purpose of a list. Are there any better ways to accomplish this?

would this be considered OK, semantically (or sensible) then? It’s a UL of DLs…


<ul>
     <li>
          <dl>
            <dt><img src="beer.jpg" ></dt>
            <dt>Coffee</dt>
              <dd>- black hot drink</dd>
              <dd>- popular with hipster types</dd>
          </dl>
     </li>
     <li>
          <dl>
            <dt><img src="beer.jpg" ></dt>
            <dt>Milk</dt>
              <dd>- White cold drink</dd>
              <dd>- popular with young kids/dd>
          </dl>
     </li>
</ul>

Hi,

You’d need to wrap each selection group in a parent and use that to highlight the children.

e.g. You could wrap the dl around each dt and set of dds and then just set the background of the dl to remain highlighted while hovered. That would means having multiple dls of course.

You could also use classes and use the general sibling selector but this will only highlight when the dt is hovered but will highlight the dds also.

e.g.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
dt, dd, p {
    margin:0;
}
dl {
    width:600px;
    margin:auto;
}
dt {
    font-weight:bold;
    padding:10px 0;
}
dd {
    padding:0 0 0 50px
}
dt:hover {background:red}
.dt1:hover ~ .dd1 {background:red}
.dt2:hover ~ .dd2 {background:red}
</style>
</head>
<body>
<dl>
    <dt class="dt1">Term Goes here</dt>
    <dd class="dd1">
        <p>Data defintion goes here</p>
    </dd>
    <dd class="dd1">
        <p>Data defintion goes here</p>
    </dd>
    <dd class="dd1">
        <p>Data defintion goes here</p>
    </dd>
    <dd class="dd1">
        <p>Data defintion goes here</p>
    </dd>
    <dt class="dt2">Term Goes here</dt>
    <dd class="dd2">
        <p>Data defintion goes here</p>
    </dd>
    <dd class="dd2">
        <p>Data defintion goes here</p>
    </dd>
    <dd class="dd2">
        <p>Data defintion goes here</p>
    </dd>
    <dd class="dd2">
        <p>Data defintion goes here</p>
    </dd>
</dl>
</body>
</html>


(Note safari and chrome are buggy with hovering and then applying effects to adjacent and general sibling selectors)

You would need to use javacript to highlight the dt based on hovering the dd as you can’t traverse the dom backwards with css.

Someone a very long time ago asked for something a little similar and this old demo uses some js to highlight similar entries.

Ugh … yuck … it might work, but semantically it’s a mess …

For a start, why have you got an inline image in there, let alone in its own <dt>? (Even ignoring the fact that it doesn’t appear to relate to the item being defined and has no alt text)

Second, the point of a <dl> is that it is a list - that you have all the pairings in one list. What you’ve done is the equivalent of having

<ul><li>...</li></ul>
<ul><li>...</li></ul>
<ul><li>...</li></ul>

It isn’t technically wrong, but it is an inappropriate use of code.

Third, if you do have to use a separate <dl> for each item, why use extra code putting it in an <li>? Just have a series of <dl>s, that will do the job just as well, and with less scope for styling mistakes.

Fourth, you could put a class/ID on each <dt> and <dd> and use Javascript to dynamically apply a style to them onMouseOver.

Fifth, you could solve all of these problems and put it in a <table>, which is not a huge stretch of the semantic imagination, and tr:hover is pretty darned easy.

It is a list of definitions. Before you can define something, you must say what you are defining. Hence DT, DD, and no DI.

I am being a CSS purist…
I think I get it now,tho. I just thought since I had to use separate DLs to achieve the effect, I would need to wrap it in a list for semantic reasons ( As it would essentially be a LIST of definition lists).

I am going to state for the record that I am somewhat disappointed in the way a DL is structured, more like regular markup than a list… ( there are no list items, and DT is like a Hx , structurally) It would have been nice if the DL tag would have included a DI (after all it still IS a LIST, right?) which would contain the DTs and DDs… oh well.

BTW
about the inline image. I got inspired by this thread :http://www.sitepoint.com/forums/showthread.php?t=706274

I agree with Stevie’s comments above.

If you don’t want to use JS or a table then this would be the lesser of two evils.


 <dl>             <dt><img src="beer.jpg" ></dt>             <dt>Coffee</dt>               <dd>- black hot drink</dd>               <dd>- popular with hipster types</dd> 
</dl>           
<dl>             <dt><img src="beer.jpg" ></dt>             <dt>Milk</dt>               <dd>- White cold drink</dd>               <dd>- popular with young kids/dd>
</dl> 

There would be no need for the ul as you have enough hooks. Although a definition list of only one data term is a little odd it’s not entirely incorrect. I would be inclined to use a normal dl structure and just use some JS to do the highlighting as there would be no real loss of function if JS was disabled.