Unproper CSS selector rule?

Question

Ok so this is my trouble, I'm tryin' to declare the following CSS rule div span > p span + p span {color: green;}; Or rather said, select a descendant span who is an adjacent brother of another span (both two last spans are descendant childs of a p element) of who is in turn a direct child of another span, but the most incredible of all this is that the rule div span> p span "YES" takes it

Here the "I suppose" proper nesting CSS selectors and HTML code

div span > p span + p span {color: blue;}

<div>
  <span>
    <p>
      <span>Item 1</span>
    </p>
    <p>
      <span>Item 2</span>
    </p>
      </span>
     </div>

Answer 1

There currently isn't a well defined way to select the last descendant of a child element without using JavaScript. But you could try using :last-child like this.

div span p:last-child span {
  color: blue;
}

<div>
  <span>
    <p>
      <span>Item 1</span>
    </p>
    <p>
      <span>Item 2</span>
    </p>
  </span>
</div>