CODEWITHSUNDEEP
htmlcss
false
false

Reputation: 10132

How to properly <ins>-markup a <dl><dt><dd>?

I am using <ins> and <del> to markup editorial changes in a document. To make them better readable they are colored in some green and red in addition to <u> and <s>. It all works fine except for the dl-dd-dt lists. There, I use an <ins> all around, but the green color is not preserved neither for the <dt> nor the <dd>.

I am aware that I can add another <ins> to each <dt> and <dd>. But I would, if possible, prefer a more principled approach: After all, the entire text including its indentation should be added and not only the elements, so it would be semantically more accurate to have a single enclosing <ins>.

(I am using Firefox 39.0, should this matter)

ins {
  background: #e4ffe4
}
del {
  background: #ffd0d0
}
<INS>
          Preamble, green
    <DL>
    <DT>dt: underlined but not green
    <DD>dd: underlined but not green
    
    <DT><INS>dt-with-ins, green</INS>
<DD>
  <INS>dd-with-ins, green</INS>

  </DL>
  </INS>

  <HR>
  <A href="http://validator.w3.org/check?uri=referer">Validated HTML</A>

Upvotes: 4

Views: 312

Answers (4)

Sean Roche
Sean Roche

Reputation: 21

@false, I agree with Lance about using the span elements and embedding them in the ins element. I think this code should create the look you desire.

ins, ins span { 
    background: #e4ffe4;
} 
del { 
    background: #ffd0d0;
}
<ins>Preamble, green
<dl>
    <dt>dt: underlined but not green</dt>
    <dd>dd: underlined but not green</dd>
    <dt><span>dt-with-ins, green</span></dt>
    <dd><span>dd-with-ins, green</span></dd>
</dl>
</ins>

Let me know if this is the look you are trying to achieve.

Upvotes: 2

Lance
Lance

Reputation: 3932

Here you go. Just add an ins dl style.

ins, ins dl {
  background: #e4ffe4
}
del {
  background: #ffd0d0
}
<INS>
          Preamble, green
    <DL>
    <DT>dt: underlined but not green
    <DD>dd: underlined but not green
    
    <DT><INS>dt-with-ins, green</INS>
<DD>
  <INS>dd-with-ins, green</INS>

  </DL>
  </INS>

  <HR>
  <A href="http://validator.w3.org/check?uri=referer">Validated HTML</A>

Upvotes: 7

Amit
Amit

Reputation: 46351

You could use the (un-recommended...) catch-all selector (*) as a catch-all for descendents:

ins, ins * { /* <- Catch all! */
  background: #e4ffe4
}
del, del * { /* <- Catch all! */
  background: #ffd0d0
}
<INS>
          Preamble, green
    <DL>
    <DT>dt: underlined but not green
    <DD>dd: underlined but not green
    
    <DT><INS>dt-with-ins, green</INS>
<DD>
  <INS>dd-with-ins, green</INS>

  </DL>
  </INS>

  <HR>
  <A href="http://validator.w3.org/check?uri=referer">Validated HTML</A>

Upvotes: 0

Oriol
Oriol

Reputation: 288550

ins elements are inline by default. Try making them block or inline-block

ins {
  background: #e4ffe4;
  text-decoration: underline;
  display: inline-block;
}
del {
  background: #ffd0d0;
}
<ins>
  Preamble, green
  <dl>
    <dt>dt: underlined and green</dt>
    <dd>dd: underlined and green</dd>
    <dt><ins>dt-with-ins, green</ins></dt>
    <dd><ins>dd-with-ins, green</ins></dd>
  </dl>
</ins>
<hr />
<a href="http://validator.w3.org/check?uri=referer">Validated HTML</a>

Upvotes: 6

Related Questions