Блог

У меня есть этот html-код :

 <div class='input-group has-danger'>
    <input class='form-control' placeholder='first name'> // first name
</div>
<div>
    <input class='form-control' placeholder='last name'> // last name
</div>
  

И у меня тоже есть этот CSS-код :

 .input-group:not(.has-danger):not(.has-success) .form-control:focus{
    border-color: #000;
}
  

Прежде всего, я не хочу изменять html-код, и моя проблема заключается в CSS-коде, и мне нужно решить проблему с помощью CSS-кода, поэтому давайте посмотрим, что мне нужно.

Как вы можете видеть, у нас есть ввод имени и фамилии, важно то, что они оба находятся в элементе div, и первый div, в котором есть ввод имени, имеет этот класс: .input-group но второй div, в котором есть ввод фамилии, не имеет этого класса: .input-group и то, что я хочукогда мы фокусируемся на входных данных, цвет границы входных данных меняется на #000 или что-то еще (цвет не имеет значения) проблема в том, что мой код не будет выбирать фамилию, и я попробовал этот код :

 .input-group:not(.has-danger):not(.has-success) .form-control:focus,
.form-control:focus{
    border-color: #000;
}
  

теперь это работает, но работает даже с этими классами: ( .has-danger , .has-success ), чего я не хочу, результат, который происходит после этого CSS-кода, заключается в том, что оба ввода будут #000 иметь цвет границы после фокусировки, но ввод имени не должен иметь #000 цвет границы, потому что он имеет этот класс: .has-danger которыйя попытался заблокировать его с помощью :not() CSS-кода.

Итак, какой код CSS я должен использовать? и спасибо.

В вашем случае просто замените .input-group на * :

 *:not(.has-danger):not(.has-success)>.form-control:focus {
  border: solid red 4px;
}  

 <div class='input-group has-danger'>
  <input class='form-control' placeholder='first name'>
</div>
<div>
  <input class='form-control' placeholder='last name'>
</div>
<div class='input-group'>
  <input class='form-control' placeholder='a name'>
</div>