Один селектор: .active {…}
С единственным селектором нет ограничений
<style> div { padding: .5em; border: solid; } .active { /* когда атрибутclass
имеет значениеactive
*/ border-color: darkseagreen; } </style> <div class="tab active"> Работает <div class="active">Работает</div> </div>
Слитно без пробела: .tab.active {…}
Два и более селекторов без пробела — ограничиваем наличием дополнительных классов у элемента
<style> div { padding: .5em; border: solid; } .tab.active { /* когда атрибутclass
имеет оба значения: иtab
, иactive
*/ border-color: darkseagreen; } </style> <div class="tab active"> Работает <div class="active">Не работает</div> </div>
Раздельно через пробел: .tab .active {…}
Два и более селекторов с пробелом — ограничиваем наличием родителей с нужным классом
<style> div { padding: .5em; border: solid; } .tab .active { /* когда атрибутclass
имеет значениеactive
и родителя сclass="tab"
*/ border-color: darkseagreen; } </style> <div class="tab active"> Не работает <div class="active">Работает</div> </div>