Removing text-decoration:underline of pre tag inside of underlined block

Question

Here's a reproduced example:

div.addu { color: #006e28; text-decoration: underline; }
div.addu blockquote pre { text-decoration: none; }
div.addu blockquote pre code { text-decoration: none; }
div.addu pre, div.rm pre, div.add pre { background-color: #f6f8fa; }
div.addu > blockquote {
border-left: 4px solid #00a000;
padding: 0 15px;
color: #006e28;
text-decoration: none;
}

<div class="addu">
<pre><code>Underline this code</code></pre>
<p><em>Effects</em>: Equivalent to:</p>
<blockquote>
<pre><code>Do not
Underline
This code</code></pre>
</blockquote>
</div>

The early underlined code looks great. The blockquote with the left border looks great. But why is the inner code still underlined? Why doesn't the text-decoration:none; apply to it? As you can see, I tried to add that in lots of different places, but the top-level underline seems to persist. How do I do this right?

Answer 1

You can use > selector of css to achieve this, No need to change HTML or add a class

• Remove text-decoration from div.addu
• Target pre tag using > selector and give text-decoration: underline to it
• Add text-decoration: underline; to p tag

div.addu { color: #006e28; }
div.addu p { text-decoration: underline; }
div.addu > pre { text-decoration: underline; }
div.addu blockquote pre { text-decoration: none; }
div.addu blockquote pre code { text-decoration: none; }
div.addu pre, div.rm pre, div.add pre { background-color: #f6f8fa; }
div.addu > blockquote {
border-left: 4px solid #00a000;
padding: 0 15px;
color: #006e28;
text-decoration: none;
}

 <div class="addu">
  <pre>
   <code>strong_ordering operator&lt;=&gt;(const error_code&amp; lhs, const error_code&amp; rhs) noexcept;</code>
  </pre>
  <p>
   <span class="marginalizedparent"><a class="marginalized">8</a></span>
   <em>Effects</em>: Equivalent to:
  </p>
  <blockquote>
   <pre>
 <code>if (auto c = lhs.category() &lt;=&gt; rhs.category(); c != 0) return c;
			return lhs.value() &lt;=&gt; rhs.value();</code>
   </pre>
  </blockquote>
  <pre>
   <code>strong_ordering operator&lt;=&gt;(const error_condition&amp; lhs, const error_condition&amp; rhs) noexcept;</code>
  </pre>
  <p>
   <span class="marginalizedparent"><a class="marginalized">9</a></span>
   <em>Effects</em>: Equivalent to:
  </p>
  <blockquote>
   <pre>
    <code>if (auto c = lhs.category() &lt;=&gt; rhs.category(); c != 0) return c;
			return lhs.value() &lt;=&gt; rhs.value();</code>
   </pre>
  </blockquote>
</div>