The ultimate target of a multi-part css selector

Question

HTML

<ul>
  <li>one</li>
  <li>two</li>
  <li>
    <ol>
      <li>three</li>
      <li>four</li>
      <li>five</li>
    </ol>
  </li>
</ul>

I want the ultimate target of this train of selectors to be <li>five</li>? FWIW, no purple shows anywhere.

ul > li + ol > li {
    /*
        nested lists
    */

    background-color: purple;   /* just for testing */
}

Isn't the order of searching left to right?

(ul>li)

(ul>li) + ol

((ul>li) + ol) > li

If so, isn't the ultimate target <li>five</li> ???

score 2 · Accepted Answer · answered Sep 08 '19 at 05:19

2

Your ol is a child of li, not a sibling.

ul > li > ol > li {
  background: purple;
  color: white;
}

<ul>
  <li>one</li>
  <li>two</li>
  <li>
    <ol>
      <li>three</li>
      <li>four</li>
      <li>five</li>
    </ol>
  </li>
</ul>

answered Sep 08 '19 at 05:19

ray

score 0 · Answer 2 · answered Sep 08 '19 at 05:16

You could try the nth-of-type selector to select the exact element.

ul li ol li:nth-of-type(3) {
  background-color: purple
}

<ul>
  <li>one</li>
  <li>two</li>
  <li>
    <ol>
      <li>three</li>
      <li>four</li>
      <li>five</li>
    </ol>
  </li>
</ul>

2 Answers2