What is the best way to choose all list items that do not contain an unordered list element?

Question

I am trying to target the <li> elements that do not have an immediate parent of <ul>.

Even after using the selector mentioned above, it doesn't seem to work as expected.

.level1:not(:has(ul)) {
  background: red;
}

<ul>
  <li class="level1">Link1</li>
  <li class="level1">Link2
    <ul>
      <li>Link2</li>
    </ul>
  </li>
</ul>

Answer 1

Answer №1

To style a specific class within an li element that does not contain the ul tag, you can add a new class and apply CSS to it.

.some-class {
  background: red
}

<ul>
  <li class="level1 some-class">Link1</li>
  <li class="level1">Link2
    <ul>
      <li>Link2</li>
   </ul>
  </li>
</ul>

EDIT

If you are unable to modify your HTML markup and this is your final code, you can use :first-child or :first-of-type in your CSS selector like below:

.level1:first-child {
  background: red
}

<ul>
  <li class="level1">Link1</li>
  <li class="level1">Link2
    <ul>
      <li>Link2</li>
    </ul>
  </li>
</ul>

Answer 2

To style a specific class within an li element that does not contain the ul tag, you can add a new class and apply CSS to it.

.some-class {
  background: red
}

<ul>
  <li class="level1 some-class">Link1</li>
  <li class="level1">Link2
    <ul>
      <li>Link2</li>
   </ul>
  </li>
</ul>

EDIT

If you are unable to modify your HTML markup and this is your final code, you can use :first-child or :first-of-type in your CSS selector like below:

.level1:first-child {
  background: red
}

<ul>
  <li class="level1">Link1</li>
  <li class="level1">Link2
    <ul>
      <li>Link2</li>
    </ul>
  </li>
</ul>