html - CSS Pseudo Class Selection not working -

i have following html structure:

<ol>     <li><a id="a" href="#">not this</a></li>     <li><a id="b" href="#">not this</a></li>     <li><a id="c" href="#">this one</a></li>     <li class="active"><span>not this</span></li> </ol> 

i want select #c via css. have tried:

ol > li:not(.active):last-child > {   border: 1px solid green; } 

as understand li:not(.active) selects li elements 1 class .active.

on selection use :last-child last of these li elements. wont work. what's wrong? possible i'm trying achieve?

thank :)

ps: list length dynamic , the elements not have id used css selection (i used in example clarify element want select) ;)

the pseudo code wrote works! there's no last-child of <li> no active class. code fails time! check 1 in which, last <li> doesn't have active.

or need use last-of-type. check fiddle:

ol > li:not(.active):last-child > {    border: 1px solid green;  }    ol > li:not(.active):last-of-type > {    border: 1px solid green;  }

<ol>      <li><a id="a" href="#">not this</a></li>      <li><a id="b" href="#">not this</a></li>      <li><a id="c" href="#">this one</a></li>      <li class="active"><span>not this</span></li>  </ol>    <ol>      <li><a id="a" href="#">not this</a></li>      <li><a id="b" href="#">not this</a></li>      <li class="active"><span>not this</span></li>      <li><a id="c" href="#">this one</a></li>  </ol>

one thing note is, last-of-type doesn't consider :not(). check css: how .class:last-of-type [classes, not elements!]! might need use javascript or jquery this.

partial solution

if know not this occurs in last, can use nth-last-child(2):

ol > li:not(.active):nth-last-child(2) > {    border: 1px solid green;  }

<ol>      <li><a id="a" href="#">not this</a></li>      <li><a id="b" href="#">not this</a></li>      <li><a id="c" href="#">this one</a></li>      <li class="active"><span>not this</span></li>  </ol>