КодSEOБлогИное

Классы через пробел и без него

Один селектор: .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>
полноэкранный пример
Все комментарии