Я хотел бы лучше понять, когда уместно использовать классы для целевого контента, а не другие доступные варианты, в частности, селекторы потомков.
Во многих случаях вместо использования классов можно использовать селекторы потомков для нацеливания на те же элементы. Если одно и то же можно сделать обоими способами, то какова логика выбора варианта?
Вот несколько примеров сценариев.:
1.
a.
<div class="main">
<div>
<div> /* target */
<div></div>
</div>
</div>
</div>
.main > div > div
б.
<div class="main">
<div>
<div class="content">
<div></div>
</div>
</div>
</div>
.content
2.
а.
<div class="main">
<div> /* target */
<div></div>
</div>
<div> /* target */
<div></div>
</div>
</div>
.main > div:first-child
.main > div:last-child
б.
<div class="main">
<div class="content1">
<div></div>
</div>
<div class="content2">
<div></div>
</div>
</div>
.content1
.content2
3.
а.
<div class="main">
<div>
<div></div>
<div></div>
<div></div>
</div>
</div>
.main > div div
б.
<div class="main">
<div class="content">
<div></div>
<div></div>
<div></div>
</div>
</div>
.content div
Какова логика между решением использовать классы или селекторы потомков?