Apply CSS style to last visible element

Question

I have read this thread: A CSS selector to get last visible div

However, it's not working for me. I wonder where I made mistake?

My CSS

.panel-i{
   position: relative;
   margin: 4px 0;
   text-align: right;
   border: 1px solid;
   border-right: none;    
   min-height: 76px;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
   padding: 8px 10px 0;
   -webkit-flex: 1 1 30%;
   -moz-flex: 1 1 30%;
   -ms-flex: 1 1 30%;
   flex: 1 1 30%;  /* flex-grow flex-shrink, flex-basis */
 }

.panel-i:not( [style*="display: none"]):last-child{
    border-right: 1px solid;
}

And HTML

<div class="money_boxesRow">
   <div class="panel-i">
       <div class="panel-i-label">
          One Off Charge                                    
       </div>
       <span>                        
           £ <span id="total_one_off_charge">0.00</span>
       </span>
   </div>

   <!-- ... -->

   <div class="panel-i so_hide_commissions" style="display: none;">
      <div class="panel-i-label">
           Commission Total                                    
      </div>
      <span>                        
          £ <span id="total_commission">0.00</span>
      </span>
   </div>
</div>

I trying to add border right to last visible box... But it's not appearing.

JSFIDDLE

Answer 1

The following selector:

.panel-i:not( [style*="display: none"]):last-child

Doesn't target the last in the .panel-i:not( [style*="display: none"]) selection. It targets, the last child of the parent, on the condition that .panel-i:not( [style*="display: none"]) is fulfilled.

:last-child is relative to the element's parent (hence child in the name). It is not relative to the selection that preceeds it.