title: How to select immediate next element after nested elements?
body: <p>I'd need to apply a style to paragraphs that are immediately after two nested unordered lists. I know the way to apply the style to a paragraph immediately after one ul would be:</p>
  <pre><code>.class ul+p 
  </code></pre>
  <p>But I can't figure out how to narrow that down to only be in effect after two nested ul's? This is how I tried to do it, but it does not work:</p>
  <pre><code>.class ul ul + p 
  </code></pre>
  <p>Code example:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.class ul + p {
    color:red;
  }
  
  .class ul ul {
    color:purple;
  }
  
  /* This is just an example of what I tried, does not work */
  .class ul ul + p { 
    color:green;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="class"&gt;
    &lt;ul&gt;
      &lt;li&gt;Item a&lt;/li&gt;
      &lt;li&gt;Item b
        &lt;ul&gt;
          &lt;li&gt;Item c (Nested list, CSS for this works fine)&lt;/li&gt;
          &lt;li&gt;Iten d (should be purple)&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
    &lt;p&gt;Paragraph after nested ul, this is the one I can't get to work, 
    what kind of CSS would I need? (should be green)&lt;/p&gt;
    &lt;ul&gt;
        &lt;li&gt;item e&lt;/li&gt;
        &lt;li&gt;item f&lt;/li&gt;
    &lt;/ul&gt;
    &lt;p&gt;Paragraph after single ul, CSS for this works fine (should be red)&lt;/p&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>