How is <ins> -markup a <dl> <dt> <dd> correct?
I use <ins>
and <del>
to mark up editorial changes in a document. To make them more readable, they are colored green and red in addition to <u>
and <s>
. Everything works fine except for the dl-dd-dt lists. There I use <ins>
around, but the green is not saved for <dt>
or for <dd>
.
I know that I can add more <ins>
to each <dt>
and <dd>
. But I would prefer a more principled approach if possible: after all, all text, including its indentation, should be added, not just elements, so it would be semantically more accurate to have one encompassing one <ins>
.
(I'm using Firefox 39.0 if it's important)
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>
source to share
Here you go. Just add style ins dl
.
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>
source to share
ins
are built-in. Try to do them block
orinline-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>
source to share
You can use the (deprecated ...) catch-all (*) selector as a catch-all catch:
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>
source to share
@false, I agree with Lance about using span elements and embedding them in the ins element. I think this code should create the look you want.
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 what you are trying to achieve.
source to share