How can I select all the li that doesn't have ul

Question

What I want to do is select <li> not having inside <ul>.

I tried with the selector above but it does not work.

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

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

Yes, thats why you asked. But what is wrong with another approach? — Nico Haase, Jan 26 '18 at 09:26
I dont't have control to change the approach in CSS and it's complicated to change now everything. I just need to select

dippas · Answer 1 · 2018-01-26T10:14:46.760

1

Add another class to li that doesn't contain ul and then apply css to that class

.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 can't edit your markup and this is your final markup then you can use :first-childor :first-of-type something like this

.level1:first-child {
  background: red
}

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

edited Jan 26 '18 at 10:14

answered Jan 26 '18 at 09:27

dippas

1

I would go for this approach too, but OP is suggesting he doesn't have the ability to change, so I can't upvote – musefan Jan 26 '18 at 09:33
so it's simple but I do not have access to put that class out there ... so you'll need another approach – Cristi Jan 26 '18 at 09:36
@Cristi: I think you need to accept that there isn't another approach, this isn't something you can do with only CSS (not at the moment anyway) – musefan Jan 26 '18 at 09:39
@Cristi I've updated the answer – dippas Jan 26 '18 at 09:59
@musefan updated the answer. I've answered in the phone. Later on PC I'll edit the answer with snippets – dippas Jan 26 '18 at 10:01
@dippas: I suppose technical it does work on the OP requirements now haha. Though I think we both know it was an example, and OP cant rely on it just being the first child – musefan Jan 26 '18 at 10:17

1 Answers1