title: How to select all pre elements inside of class, recursively?
body: <p>I have a very small project (html + css), where all of the "pre" tags had a CSS style. It was looking like this:</p>
  
  <pre><code>pre { color: blue; }
  </code></pre>
  
  <p>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.</p>
  
  <p>An example:</p>
  
  <pre><code>&lt;pre&gt; not this &lt;/pre&gt;
  &lt;div&gt; not this &lt;/div&gt;
  &lt;pre&gt; also not this one &lt;/pre&gt;
  &lt;div class="wrapper"&gt;
    &lt;pre&gt; this should be affected &lt;/pre&gt;
    &lt;pre&gt; this should be affected &lt;/pre&gt;
    &lt;pre&gt; this should be affected &lt;/pre&gt;
    &lt;div&gt;
      &lt;h1&gt;
        &lt;span&gt;
            &lt;pre&gt; This should be also affected, but it is sadly not working. &lt;/pre&gt;
        &lt;/span&gt;
      &lt;/h1&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>This is my CSS, but this is only working for the top-level "pre" tags:</p>
  
  <pre><code>.wrapper pre {
      color: blue;
  }
  </code></pre>
  
  <p>If I modify the CSS to this:</p>
  
  <pre><code>pre {
      color: blue;
  }
  </code></pre>
  
  <p>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.</p>
  
  <p>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.</p>