исключая ввод внутри div с определенным классом из списка селекторов

Question

у нас есть класс has-error, который мы применяем к div, у которого есть входы с ошибкой.

.has-error select, .has-error textarea, .has-error .mydp, .has-error input {
  border: 1px solid red !important;
}

Но есть еще один div mydp, который группирует определенные элементы управления (ввод и кнопки). Поэтому, используя вышеприведенный класс has-error, мы получили 2 границы в этом случае. Я хочу исключить input внутри .mydp формы над селектором css.

Я пытался

.has-error select, .has-error textarea, .has-error .mydp, .has-error input:not(.mydp input)

но не знаю, почему он исключает все входные данные.

сейчас я использую

.has-error .mydp input {
  border: none !important;
}

для удаления формы границы input внутри .mydp и ее исправного состояния. Но я хочу, чтобы он был исключен первым селектором.

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.has-error select, .has-error textarea, .has-error .mydp, .has-error input {
  border: 1px solid red !important;
}

<div class="has-error">
    <div>
        <input />
    </div>
    <div>
        <span class="mydp"  >
            <input />
            <a href="#">btn</a>
        </span>
    </div>
</div>