Select elements between two defined elements

Question

I am trying to select elements between two defined elements, for example I have a ul element with many li elements as follows:

<ul>
    <li id="title1">Firt Tittle</li>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
    <li>Five</li>
    <li id="title2">Second Tittle</li>
    <li>Six</li>
    <li>Seven</li>
    <li>Eight</li>
     .....
    <li>..</li>
</ul>

Now, I want to select li tags from 1 to 5, I used #title1 ~ li:not[id] But this selector will be select all 3 unnecessary li tags from 6 to 8. Any suggest or help, thanks so much!

Does this answer your question? [CSS Selector for nth range?](https://stackoverflow.com/questions/15639247/css-selector-for-nth-range) — johannchopin, Apr 05 '20 at 20:20

score 2 · Accepted Answer · answered Apr 05 '20 at 20:30

In your specific case where you know the structure of your DOM, you can use a mix between the css rule :nth-last-child(), :nth-child() and :not() like that:

ul li:not(#title1):not(#title2):nth-child(n+1):nth-last-child(n+5) {
  background-color: #FFFFCC;
}

<ul>
  <li id="title1">Firt Tittle</li>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
  <li id="title2">Second Tittle</li>
  <li>Six</li>
  <li>Seven</li>
  <li>Eight</li>
  <li>..</li>
</ul>

Select elements between two defined elements

1 Answers1

Linked