2015-12-01 5 views
0

Я использую валидатор, который добавляется тег после ввода, и я хочу изменить последний тег в моем пролетеCSS фокус последний ребенок

<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; 
    } 

что мне нужно, это доступ к последней <i> на фокус ввода I» ve добавил код ниже, но никто из них не работал

.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; 
    } 

ответ

0

+ будет направлен на следующий непосредственный элемент родственного. Если вы хотите найти все элементы брата, используйте ~ вместо +.

.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

0

Я думаю, что для улучшения ответов есть некоторый код CSS. Тем не менее, это должно работать, несмотря на отсутствие кода CSS:

i:last-child 

С помощью этого вы можете выбрать последний дочерний <i> тега. Теперь, если вы хотите изменить свойства CSS, в вашем CSS:

i:last-child { 
    background: #ff0000; 
} 
Смежные вопросы