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

384

26 февраля 2017, 09:20

Я знаю, что при коде вида .class1 + .class2 заданые стили применятся к классу class2, который следует сразу после class1. Но как мне задать стили конкретно классу1, после которого есть class2?

Answer 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>

Создание интернет-магазина кондитера в ABCname

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Написать код C++ на Python

Привет всем,имеется библиотека наDLL и хочу его использовать на Python

348

c++

Использование умных указателей

У меня в коде часто повторяется фрагмент:

328

c++

MessageBox попадает в бесконечный цикл WinApi

Пишу простейший калькулятор с помощью WinApi, когда происходит деление на 0 нужно вывести MessageBox с ошибкойНо в калькуляторе есть функция auto-reresh,...

465

c++

Найти отличное от других число

Есть последовательность различных int чиселНеобходимо эффективно найти любое int число, отличающееся от данных

425