How to NOT select an element, when another certain NESTED element is preceded?

35 Views Asked by At

I am trying to select all <ul> elements that are Not preceded by a <mark> element directly Nested in a <p> element.

In other words, I want to only select <ul> elements that do not follow a paragraph <p> element bearing a <mark> element as their last child.


I have tried several things like p:not(p > mark) + ul{} and p:not(p) > mark + ul{}
But either the CSS rules select too much (all ul elements) or too little (no ul elements at all).

What have I overlooked?

JS Fiddle demo

/* CSS */
/* Select ul elements that are not preceeded by a nested <mark> element as last child of the preceding paragraph p element */

p:not(p > mark) + ul{
  margin-top: 2em;
  }
<p>
  Text Text Text
</p>

<ul>
  <!-- This ul element should BE selected -->
  <!-- There should be a margin above this list -->
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
</ul>


<hr>


<p>
  Text Text Text<br>
  <mark>Marker</mark><!-- Look out for this element inside preceding paragraph -->
</p>

<ul>
  <!-- This ul element should NOT be selected -->
  <!-- There should be NO margins above this list -->
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
</ul>

0

There are 0 best solutions below