Q:

CSS focus last-child

I am using validator which is added tag after input and I wanna change the last tag in my span    
  <span class="input-icon">                                            
      <input type="text" id="name" name="name" class="form-control" data-fv-field="name">
      <i class="form-control-feedback" data-fv-icon-for="name" style="display: none;"></i>                                                    
      <i class="fa fa-globe blue circular"></i>                                                
  </span>

  .input-icon :last-child  {
      box-shadow : 0 0 0 0.1em rgba(0, 0, 0, 0.1) inset;   
  }

what I need is accessing to the last <i> on input focus 
I've added code below but none of them worked
    .input-icon > input:focus + .circular  {
        box-shadow : 0 0 0 0.1em rgba(0, 0, 0, 0.25) inset !important;   
    }

   .input-icon > input:focus .circular  {
        box-shadow : 0 0 0 0.1em rgba(0, 0, 0, 0.25) inset !important;   
    }

   .input-icon > input:focus :last-child  {
        box-shadow : 0 0 0 0.1em rgba(0, 0, 0, 0.25) inset !important;   
    }

   .input-icon > input:focus + [class*="fa-"], .input-icon > input:focus :last-child  {
       opacity: 1;
    }

A:

+ will target the next immediate sibling element. If you want to find all the  sibling elements then use ~ instead of +.
   .input-icon > input:focus ~ .circular  {
    box-shadow : 0 0 0 0.1em rgba(0, 0, 0, 0.25) inset !important;   
    }

    .input-icon > input:focus .circular  {
    box-shadow : 0 0 0 0.1em rgba(0, 0, 0, 0.25) inset !important;   
    }

   .input-icon > input:focus :last-child  {
    box-shadow : 0 0 0 0.1em rgba(0, 0, 0, 0.25) inset !important;   
   }

   .input-icon > input:focus ~ [class*="fa-"], .input-icon > input:focus :last-child  {
   opacity: 1;
   }

DEMO

