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?
/* 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>