Select last few N items using chained CSS selectors for a deeply nested html element [closed]

I have a HTML markup of the following structure,

<div class='items'>
 <time></time>
 <ol class='category'>
   <li class='book'>
    <a href></a>
    <div class='tooltip'>
    <div>
   </li>
 <ol>
</div>

In the above markup, the div with the class tooltip is a tooltip whose position needs to be controlled so that I can either show it to the left or right by applying a class. I need to select the last 4 items, no matter how many items are rendered on the screen.

I came up with the markup as follows to achieve that,

// select last four bars and display tooltip on left
div.items{
  &:last-of-type {
    ol > li:nth-last-child(-n + 4) > .tooltip {
      left: calc(-1 * #{$tooltip-width});
   }
  }
}

This selects only the last div[class='items'] and not the last 4 divs[class='items'] Kindly let me know what CSS I'm missing here