CSS selector for element before another element/remove list-style-type of nested uls-CodePudding

I have nested uls like this:

    <ul>
      <li>1...</li>
      <li>2...</li>
      <li id="li_3">
      <ul>
          <li id="li_3_1">3.1...</li>
        </ul>
      </li>
      <li>4...</li>
    </ul>

li_3 displays a bullet but I don't want it to since its children li already do (there are 2 bullets side to side near li_3_1).

So I wanted to select all the li having a ul as a direct child, something like this:

ul < li {
  list-style-type: none;
}

But of course the selector < doesn't exist. What solutions do I have?

CodePudding user response：

If you want to remove list-style in nested ul, this selector may be helpful.

ul > ul {
    list-style: none;
}

CodePudding user response：

You could just call the li directly using it's ID in CSS using this code:

#li_3 {
  list-style-type: none;
}

Or if there are multiple you could just add a class to every li you want the bullet removed from and use the same code.

working:

#li_3 {
  list-style-type: none;
}

    <ul>
      <li>1...</li>
      <li>2...</li>
      <li id="li_3">
      <ul>
          <li id="li_3_1">3.1...</li>
        </ul>
      </li>
      <li>4...</li>
    </ul>

CodePudding user response：

Found it:

li:has(ul) {list-style-type: none;}