Css и/или SASS + (sibling) вверх

В CSS нет способа выбрать брата с плюсом, если в выводе находится старший брат, предшествующий элемент в html.

Например

<div class="first">
<div class="second">

.second + .first { style applied to div.first}

Есть ли способ сделать это в SASS/SCSS?

Ответ 1

SASS поддерживает все селектора CSS3. Сиблинг + является одним из них. Но это не приносит некоторые дополнительные функции. Это означает, что вы можете сделать

first {
  + second { 
     font-size: smaller;
  }
}

Но вы не можете воздействовать на родителя с ним...

Ps: это, по-видимому, особенности CSS4:)

Ответ 2

Я знаю это чувство, это действительно раздражает. Я нашел быстрый способ сделать это.

HTML:

<div class="mainmenu">
  <div class="subnav">
    <ul>
      <li>Whatever</li>
    </ul>
  </div>
</div>

-------- >

SCSS:

//CSS указывает на первый ребенок div "mainmenu" с class "subnav".

 .mainmenu{
      & > .subnav{
        // Child Selector SCSS HERE
      }
    }

==== > thgaskell, вы доказали, что я ошибаюсь:) Мой код работает отлично, и я потерял 6 Кбайт моего кода с мини-кодом! Я обновил код, как описано ниже.

Ответ 3

Может или не подходит для ваших нужд, но вы можете использовать общий селектор в Sass/CSS. Это выберет все элементы на том же уровне node (явно не ранее, но все же пригодится):

.second {
   .first ~ & {
       /* styles to be applied to .second if a .first exists at the same node level */   
   }
}

Ответ 4

В итоге я использовал JQuery. выполняет задание:) (извините, у меня больше нет кода примера, поскольку я пошел другим путем, но его довольно простой, что-то вроде "если у ребенка есть класс, тогда добавьте класс к этому".:)

Ответ 5

div { & + & { margin-left: 15px; background: firebrick;}}

попробуйте, он работает.