Я знаю, что при коде вида .class1 + .class2
заданые стили применятся к классу class2
, который следует сразу после class1
.
Но как мне задать стили конкретно классу1, после которого есть class2
?
1 ответ
Поскольку обратного селектора, вроде .class1 - .class2
в CSS не существует, какой-нибудь частный случай можно решить селектором +
или ~
, назначением display: flex
родителю и установкой order
потомкам. Разметка при этом должна исходить из того, что «предыдущий» элемент должен располагаться ниже. Альтернативой свойству order
может быть свойство flex-direction: row-reverse
.
.container {
display: flex;
}
.child {
border: 1px solid;
padding: 1em;
}
.class2 {
order: 1
}
.class3 {
order: 2
}
.next ~ .prev {
background: #ccc;
}
<div class=container>
<div class="child class3">class3</div>
<div class="child next class2">class2</div>
<div class="child prev class1">class1</div>
</div>
.class1:first-child
или.class0 + .class1