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?

score 2 · Accepted Answer · answered Dec 19 '13 at 15:35

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

score 1 · Answer 2 · answered Dec 19 '13 at 16:07

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.

ke20 · Answer 3 · 2013-12-19T19:12:03.003

0

If you try it:

dt * {
    display: none;
}

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

edited Dec 19 '13 at 19:12

answered Dec 19 '13 at 15:30

ke20

665
4
19

1

The (very long) text isn't in a containing element so this doesn't hide it. – Charles Dec 19 '13 at 15:33
1

note that visibility: hidden will still reserve space for the hidden object. Using display:none will not reserve space. http://stackoverflow.com/questions/133051/what-is-the-difference-between-visibilityhidden-and-displaynone – tjboswell Dec 19 '13 at 15:34
@Charles if you want to hide the text, you need to wrap it into something then. div, p, etc. Otherwise, the only way to hide it is to hide the entire dt. – tjboswell Dec 19 '13 at 15:36
@teabos: As I said in the question, I do not have control over the HTML, only the CSS. – Charles Dec 19 '13 at 15:38
1

@teabos Not necessarily, see [my answer](http://stackoverflow.com/a/20685651/1883647). – ajp15243 Dec 19 '13 at 15:38

Hiding paraphyletic objects in CSS

3 Answers3