Не применять CSS для конкретных родителей класса

Question

У меня есть HTML как

<div class="row"> 
    <div class="col-md-3"> 
    <div class="form-group"> 
     <label class="control-label">Values</label> 
     <div class="form-inline"> 
     @Html.Kendo().NumericTextBoxFor(m => m.Min).Decimals(2); 
     @Html.Kendo().NumericTextBoxFor(m => m.Max).Decimals(2); 
     </div> 
    </div> 
    </div> 
</div> 

Числовой текстовое поле кендо имеет .k-numerictextbox класс. и у меня есть CSS

.form-group .k-numerictextbox { 
    width: 100% !important; 
} 

с этими настройками в настоящее время CSS применяется к NumericTextBox.

Я не хочу CSS, чтобы применить на NumericTextBox, если его под form-inline класса

Answer 1

Я хотел бы удалить с помощью !important, так как это, вероятно, не требуется. Добавить еще одно правило, с большей специфичностью (включая .form-inline бы хороший способ сделать это:

.form-group .k-numerictextbox { 
    width: 100%; 
} 
.form-group .form-inline .k-numerictextbox { 
    width: auto; 
} 

Answer 2

Для этого конкретного HTML структуры (всегда есть один элемент между .k-numerictextbox и .form-group, который либо является или не .form-inline) затем

.form-group *:not(.form-inline) .k-numerictextbox { 
 
    width:100%; 
 
}

<div class="row"> 
 
    <div class="col-md-3"> 
 
    <div class="form-group"> 
 
     <label class="control-label">Values</label> 
 
     <div class="form-inline"> 
 
     <input class="k-numerictextbox" /> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<div class="row"> 
 
    <div class="col-md-3"> 
 
    <div class="form-group"> 
 
     <label class="control-label">Values</label> 
 
     <div class="form-not-inline"> 
 
     <input class="k-numerictextbox" /> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

---

(иметь в виду, что это хрупкое правило, потому что если есть еще один контейнер из .k-numerictextbox внутри .form-group он не будет работать)