0

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? Thanks! 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>
Sam
  • 15,254
  • 25
  • 90
  • 145
  • 2
    what you need is `:has()` but it *has* no support – Temani Afif Apr 21 '21 at 13:20
  • 1
    To select an element based on its children you need the `:has` pseudo-class. `p:not(:has(>mark)) + ul` However, this is a proposed feature with [no browser support at the time of writing](https://caniuse.com/?search=has). Change the HTML instead. Add a class to the paragraph. – Quentin Apr 21 '21 at 13:20

0 Answers0