В чем отличие в объединении селекторов в CSS

289

30 июня 2018, 07:50

Я пытаюсь разобраться в чем разница между выполнением трех разных типов селекторов. Т.е. как они будут выполнены и для каких из них будет применен бекграйуд:

Два сопряженных и один через запятую:

.uiIcon .itemIcon, .itemIcon { background: black; }

Просто три в ряд через пробел:

.uiIcon .itemIcon .itemIcon { background: black; }

Все три класса сопряженные:

.uiIcon.itemIcon.itemIcon { background: black; }

Заранее спасибо!

Answer 1

Это всё написано в любом туториале по CSS на первой странице.

.uiIcon .itemIcon, .itemIcon { background: black; }

запятая - это перечисление. не имеет смысла, т.к. .uiIcon .itemIcon это подмножество .itemIcon. Применится ко всем элементам с классом itemIcon

.uiIcon .itemIcon, .itemIcon { background: black; }

<div class="itemIcon">1</div> 
<br/> 
<div class="uiIcon itemIcon">1</div>

.uiIcon .itemIcon .itemIcon { background: black; }

.itemIcon вложенный в .itemIcon который вложен в .uiIcon

.uiIcon .itemIcon .itemIcon { background: black; }

<div class="uiIcon"> 
  <div class="itemIcon">Этот белый 
    <div class="itemIcon">Этот Чёрный</div> 
  </div> 
</div>

.uiIcon.itemIcon.itemIcon { background: black; }

Элемент с двумя классами сразу - uiIcon и itemIcon

.uiIcon.itemIcon.itemIcon { background: black; }

<div class="uiIcon itemIcon"> 
Этот Чёрный 
</div>   
 
<div class="uiIcon">Этот белый 
    <div class="itemIcon">Этот белый</div> 
</div>

Answer 2

1 .itemIcon:

применяется для всех элементов с классом .itemIcon

.itemIcon { 
  background: black; 
  margin-bottom: 5px; 
  color: #fff; 
}

<div class="uiIcon"> 
  <div class="itemIcon">.itemIcon</div> 
</div> 
 
<div class="itemIcon">.itemIcon</div> 
 
<div class="uiIcon"> 
  <div class="itemIcon"> 
    <div class="itemIcon">.itemIcon</div> 
  </div> 
</div> 
 
<div class="uiIcon itemIcon itemIcon"> 
  .itemIcon 
</div>

2. .uiIcon .itemIcon :

.uiIcon родитель для .itemIcon

.uiIcon .itemIcon{ 
  background: black; 
  margin-bottom: 5px; 
  color: #fff; 
}

<div class="uiIcon"> 
  <div class="itemIcon">.uiIcon .itemIcon</div> 
</div> 
<div class="uiIcon"> 
  <div class="itemIcon">.uiIcon .itemIcon</div> 
  <div class="itemIcon"> 
    <div class="itemIcon">.uiIcon .itemIcon</div> 
  </div> 
</div>

3. .uiIcon .itemIcon .itemIcon :

.uiIcon родитель для .itemIcon, который в свою очередь является родителем для .itemIcon

.uiIcon .itemIcon .itemIcon { 
  background: red; 
  margin-bottom: 5px; 
  color: #fff; 
}

<div class="uiIcon"> 
  <div class="itemIcon"> 
    <div class="itemIcon">.uiIcon .itemIcon .itemIcon</div> 
  </div> 
</div> 
<div class="uiIcon"> 
  <div class="itemIcon"> 
    <div class="itemIcon"> 
      <div class="itemIcon">.uiIcon .itemIcon .itemIcon</div> 
    </div> 
  </div> 
</div>

4. .uiIcon.itemIcon.itemIcon :

классы заданные для одного элемента

.uiIcon.itemIcon.itemIcon { 
  background: blue; 
  margin-bottom: 5px; 
  color: #fff; 
}

<div class="uiIcon itemIcon itemIcon"> 
  .uiIcon.itemIcon.itemIcon 
</div> 
<p class="uiIcon itemIcon itemIcon"> 
  .uiIcon.itemIcon.itemIcon 
</p> 
<h2 class="uiIcon itemIcon itemIcon"> 
  .uiIcon.itemIcon.itemIcon 
</h2>

Приоритет стилей определется его весом - Хабр - Взвешиваем селекторы CSS