title: How to NOT select an element, when another certain NESTED element is preceded?
body: <p>I am trying to select all <code>&lt;ul&gt;</code> elements that are <strong>Not</strong> preceded by a <code>&lt;mark&gt;</code> element directly <strong>Nested in</strong> a <code>&lt;p&gt;</code> element.</p>
  <p><em>In other words</em></p>
  <p>I want to only select <code>&lt;ul&gt;</code> elements that do not follow a paragraph <code>&lt;p&gt;</code> element bearing a <code>&lt;mark&gt;</code> element as their last child.</p>
  <hr />
  <p>I have tried several things like <code>p:not(p &gt; mark) + ul{}</code> and <code>p:not(p) &gt; mark + ul{}</code><br />
  But either the CSS rules select too much (all ul elements) or too little (no ul elements at all).</p>
  <p>What have I overlooked? Thanks! <strong><a href="https://jsfiddle.net/4e1ajqr8/" rel="nofollow noreferrer">js fiddle demo</a></strong></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>/* CSS */
  /* Select ul elements that are not preceeded by a nested &lt;mark&gt; element as last child of the preceding paragraph p element */
  
  p:not(p &gt; mark) + ul{
    margin-top: 2em;
    }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;p&gt;
    Text Text Text
  &lt;/p&gt;
  
  &lt;ul&gt;
    &lt;!-- This ul element should BE selected --&gt;
    &lt;!-- There should be a margin above this list --&gt;
    &lt;li&gt;List item&lt;/li&gt;
    &lt;li&gt;List item&lt;/li&gt;
    &lt;li&gt;List item&lt;/li&gt;
  &lt;/ul&gt;
  
  
  &lt;hr&gt;
  
  
  &lt;p&gt;
    Text Text Text&lt;br&gt;
    &lt;mark&gt;Marker&lt;/mark&gt;&lt;!-- Look out for this element inside preceding paragraph --&gt;
  &lt;/p&gt;
  
  &lt;ul&gt;
    &lt;!-- This ul element should NOT be selected --&gt;
    &lt;!-- There should be NO margins above this list --&gt;
    &lt;li&gt;List item&lt;/li&gt;
    &lt;li&gt;List item&lt;/li&gt;
    &lt;li&gt;List item&lt;/li&gt;
  &lt;/ul&gt;</code></pre>
  </div>
  </div>
  </p>