How to select all pre elements inside of class, recursively? - html

Question

I have a very small project (html + css), where all of the "pre" tags had a CSS style. It was looking like this:
pre { color: blue; }
But now, I want to add this into a very large project, and I don't want to ruin everything. I want to modify only those "pre" tags, which are related to this specific small thing. So my idea is, that I will put everything - which is related to this - in the inside of a wrapper "div" element, and only those "pre" tags should be affected with the CSS which are in the inside of this wrapper, no matter how deep.
An example:
<pre> not this </pre>
<div> not this </div>
<pre> also not this one </pre>
<div class="wrapper">
<pre> this should be affected </pre>
<pre> this should be affected </pre>
<pre> this should be affected </pre>
<div>
<h1>
<span>
<pre> This should be also affected, but it is sadly not working. </pre>
</span>
</h1>
</div>
</div>
This is my CSS, but this is only working for the top-level "pre" tags:
.wrapper pre {
color: blue;
}
If I modify the CSS to this:
pre {
color: blue;
}
That will work for all of the "pre" elements, but the problem is, I want it only for those "pre" elements which are in the inside of the wrapper element.
How can I solve this? I was reading stackoverflow and other sites about CSS, and I am trying to solve this but I cannot figure this out. Thank you.

Answer 1

The code you provided already works. Do you have more CSS rules in your other project that are maybe preventing your inner pres to not become blue?
.wrapper pre {
color: blue;
}
<pre> not this </pre>
<div> not this </div>
<pre> also not this one </pre>
<div class="wrapper">
<pre> this should be affected </pre>
<pre> this should be affected </pre>
<pre> this should be affected </pre>
<div>
<h1>
<span>
<pre>This should be also affected, but it is sadly not working.</pre>
</span>
</h1>
</div>
</div>