4

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

5
  • .class1:first-child или .class0 + .class1
    – webDev_
    24 фев 2017 в 14:01
  • @webDev_ 1) и как ему поможет first-child? Он применится даже если рядом никого не будет. 2)поменять порядок нельзя т.к. тогда не будет выделения. С сайта learn.javascript.ru: "div + p – первый правый сосед: p на том же уровне вложенности, который идёт сразу после div (если есть)."
    – alexoander
    24 фев 2017 в 14:03
  • Обратного селектора в CSS нет, потому в общем виде такой запрос можно решить только через яваскрипт. 24 фев 2017 в 14:20
  • @SashaOmelchenko наверно ты прав, т.к. я тоже не нашел ничего толкового в доках по css. Но вопрос жутко интересный и мб кто-то предложит нестандартное решение) мб через блок родителя как то извратиться можно ?
    – alexoander
    24 фев 2017 в 14:21
  • в js я то проверю, если .next('') равно чему-то, то такие стили прописать, а если нет то такие, но у меня именно решение через css волнует
    – Oleksandr
    24 фев 2017 в 14:29

1 ответ 1

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>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.