Hiding paraphyletic objects in CSS

Question

I'm trying to style elements of a webpage over which I do not have control (think userscript). I have a chunk of HTML like so:

<dt>
  <a href="..." class="important-link">important text</a>
  Long unimportant text that doesn't matter to me.
  <a href="..." class="unimportant-link">this doesn't matter either</a>
</dt>

How can I hide everything in the dt except the important link? I would like to set display to none, but once the dt is undisplayed it can't redisplay its children. I don't merely want to set the text to visibility:invisible since it is long (the whole point is to cut down on scrolling).

Any ideas?

Answer 1

You could set the font size in the dt to 0 (to hide the text node), hide the .unimportant-link, and then re-set the font size on the .important-link (to override the 0 font size it would otherwise inherit).

dt {
    font-size: 0;
}

dt .unimportant-link {
    display: none;
}

dt .important-link {
    font-size: 16px;
}

You could alternatively use visibility: hidden; if you want the space taken up by .unimportant-link to stay (rather than removing it from flow via display: none;).

Fiddle

Answer 2

Based on the fact that you have a text node with no wrapping element, there's only one approach that I see which could work. You'd need to set the height of the dt to be equal to the font size of your .important-link.

dt{
  height: 1em;
  overflow:hidden;
  }
dt .important-link{
    font-size: 1em;
    display:block;
}

This effectively sets that first link as "block level", and then "cuts off" all of the remaining text. If you wanted to undo this later in the session, you could set height: auto, remove overflow:hidden, or both.

Answer 3

If you try it:

dt * {
    display: none;
}

dt *.important-link {
    display: inline;
}