Ограничить область действия селектора CSS

Question

Это немного странно, и, может быть, это неправильно, но это то, что я хочу сделать ...

Мой HTML выглядит следующим образом:

<div class="item is-active"> 
    <div class="item-part"></div> 

    <div class="item small"> 
     <div class="item-part"> 

     </div> 
    </div> 
</div> 

И с помощью CSS Я хочу сделать это:

.item.is-active .item-part { 
    outline:1px solid red; 
} 

проблема заключается в том, что внутренняя .item-part также будет описано, не является желательным. Я хочу, чтобы .item-part был очерчен, только если его ближайший .item - .is-active.

Я бы предпочел не использовать JS для этого или селектора direct-sibling, так как html может отличаться. я также не хочу, чтобы переопределить правила, как это:

.item:not(.is-active) .item-part { 
     outline:none; 
} 

Вот fiddle с живым примером

Спасибо.

Answer 1

Как насчет (Предполагая, что только один элемент имеет is-active класс):

.item.is-active .item-part { 
    outline:1px solid red; /* active item part style */ 
} 
.item.is-active .item .item-part {/* e.g. child of iten that is not active*/ 
    outline: none; /* disable active item part style */ 
} 

Если вы не можете изменять имена классов, не будет использовать JavaScript, и прямое решение потомок не работает (например, потому что иногда может быть wrapper-div); это единственное решение, которое я могу придумать ...

Answer 2

Просто переопределить стиль, когда ваш элемент не имеет is-active класса:

.item.is-active .item-part { 
    outline:1px solid red; 
} 

.item.is-active .item .item-part, 
.item .item-part { 
    outline:none; 
} 

.item.is-active .item-part имеет более высокий, чем specificty селектор .item .item-part, так это всегда будет применяться к потомкам .item-part.

JSFiddle demo.