Когда атрибут class
имеет значение active
Не работает.
Работает.
Работает.
Работает.
<style>
.active {
color: red;
}
.tab1 {
background: khaki;
}
.tab2 {
border: solid darkseagreen;
}
</style>
<div>Не работает.</div>
<div class="active">Работает.</div>
<div class="tab1 active">Работает.</div> <!-- В атрибуте class
несколько значений перечисляются через пробел. -->
<div class="tab2 active">Работает.</div>
Когда атрибут class
имеет оба значения: и tab2
, и active
Не работает.
Не работает.
Работает.
Работает.
<style> .tab2.active { /* без пробела — ограничиваем наличием дополнительного класса у элемента */ color: red; } .tab1 { background: khaki; } .tab2 { border: solid darkseagreen; } </style> <div class="active">Не работает.</div> <div class="tab1 active">Не работает.</div> <div class="tab2 active">Работает.</div> <div class="tab1 tab2 active">Работает.</div>
Когда атрибут class
имеет значение active
и родителя с class="tab2"
Не работает.
Не работает.
Работает.
Работает.
<style> .tab2 .active { /* с пробелом — ограничиваем наличием родителя с нужным классом */ color: red; } .tab1 { background: khaki; } .tab2 { border: solid darkseagreen; } </style> <div class="tab1"> <div class="active">Не работает.</div> </div> <div class="tab2 active">Не работает.</div> <div class="tab2"> <div class="active">Работает.</div> </div> <div class="tab1 tab2"> <div class="active">Работает.</div> </div>