В приведенном ниже коде, как бы настроить таргетинг на второй div.b с помощью CSS?
<div>
<div class="a"></div>
<div class="a"></div>
<div class="a"></div>
<div class="b"></div>
<div class="b"></div>
<div class="a"></div>
</div>
Как настроить таргетинг на этот div с помощью CSS?
Ответ 1
В этом конкретном случае вы можете использовать соседний комбинатор сиблинга, +.
.b + .b {
color:red;
}
Вышеприведенное предполагает, что существует не более двух смежных элементов .b. Если бы это было не так, общий помощник ПРИМЕР ЗДЕСЬ
.b ~ .b {
color:red;
}
В качестве альтернативы вы также можете использовать следующее, которое будет работать с несколькими элементами .b, независимо от положения. Сначала используйте .b ~ .b, чтобы установить стиль второго, целевого элемента. Затем вам нужно будет использовать .b ~ .b ~ .b to reset стиль элементов .b, следующих за вторым элементом .b.
.b ~ .b {
color:red;
}
.b ~ .b ~ .b {
color:initial;
}
Это должно теоретически работать во всех случаях, например:
<div class="a">1a</div>
<div class="a">2a</div>
<div class="a">3a</div>
<div class="b">1b</div>
<div class="a">4a</div>
<div class="b">2b</div> <!-- This would be styled red.. -->
<div class="b">3b</div>
Также стоит отметить, что значение initial не поддерживается в IE. Поэтому вы можете использовать color:#000 для reset цвет до значений по умолчанию. Альтернативно, inherit тоже будет работать.
В качестве более практичного примера вы можете использовать что-то вроде этого:
.b ~ .b {
width:200px;
background:blue;
color:#fff;
}
.b ~ .b ~ .b {
width:auto;
background:transparent;
color:#000;
}
Ответ 2
Существует и другой способ достижения того, что вы хотите сделать.
div > :nth-child(5){
}