Select Last of Type with CSS -

given following html, css rule select , select line says two?

<ul class="menu">   <li><a>void</a></li>   <li class="active">     <a>one</a>     <ul class="sub-menu">       <li class="active"><a>two</a></li>       <li><a>three</a></li>     </ul>   </li> </ul> 

the following selector doesn't work:

.active:last-of-type {...} 

also, must clarify if there no sub-menu or rather link in sub-menu not active, parent menu must selected same rule. in other words, given following html, same rule highlight line says one:

<ul class="menu">   <li><a>void</a></li>   <li class="active">     <a>one</a>     <ul class="sub-menu">       <li><a>two</a></li>       <li><a>three</a></li>     </ul>   </li> </ul> 

no single selector statement match both of use cases (not until parent selectors supported, anyway). have include, example, additional class in 1 of use cases in order fulfill requirements without selector matching .active elements.

assuming following use cases:

active sub-menu element

<ul class="menu">   <li class="active"><a>one</a></li>   <li>     <ul class="sub-menu">       <li class="active"><a>two</a></li>       <li><a>three</a></li>     </ul>   </li> </ul> 

no active sub-menu element

<ul class="menu no-active-sub-menu">   <li class="active"><a>one</a></li>   <li>     <ul class="sub-menu">       <li><a>two</a></li>       <li><a>three</a></li>     </ul>   </li> </ul> 

the following selectors work:

.menu .sub-menu > .active, .menu.no-active-sub-menu > .active {      ... }