Как найти соседний селектор в css?

#css

Я знаю, что при коде вида .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;
}

  
class3
  
class2
  
class1