0

I want a CSS rule to apply to all <ul> elements except those who have an ancestor whose class is editable, whether that ancestor is their direct parent or no.

The actual type of the ancestor element is not important. So for instance:

<div>
    <ul> <!-- Apply style here -->
        <li>hello</li>
    </ul>
</div>
<figcaption class="editable">
    <div>
        <ul> <!-- No style here-->
            <li>hi</li>
        </ul>
    </div>
</figcaption>
<figcaption class="editable">
    <ul> <!-- No style either-->
        <li>hello</li>
    </ul>
</figcaption>

I've tried:

*:not(.editable) > ul ==> rule is not applied to immediate children as desired but is applied on non immediate children

*:not(.editable) ul ==> rule is applied to all children

I know I can use .editable ul to apply a style to the elements I want but that's not exactly what I want, since what I want to do is prevent the style from being added in the first place.

Grumbunks
  • 1,027
  • 1
  • 7
  • 21
  • why not give the `
      ` you want to edit an ID?
    – xmaster Mar 24 '20 at 09:17
  • This simply can not work for arbitrary nesting levels, using `*:not(.editable) ul` - the `div` in your first `figcaption` element in the example “satisfies” the `*:not(.editable)` part here. – CBroe Mar 24 '20 at 09:17

0 Answers0