Селектор левых соседей

832
31 декабря 2016, 15:43

Столкнулся с проблемой: нужно разместить стиль для соседей, которые находится слева от элемента. В моём случае, нужно, чтобы ul элемент красил элемент a в красный.

Вот мой html код:

<ul> 
  <li><a href="javascript://">Пункт 1</a></li> 
  <li><a href="javascript://">Пункт 2</a></li> 
  <li><a href="javascript://">Пункт 3</a></li> 
  <li><a href="javascript://">Пункт 4</a> 
      <ul> 
        <li><a href="javascript://">Пункт 1</a></li> 
        <li><a href="javascript://">Пункт 2</a></li> 
        <li><a href="javascript://">Пункт 3</a></li> 
        <li><a href="javascript://">Пункт 4</a></li> 
      </ul> 
  </li> 
</ul>

Конечно, у меня у второго меню стиль position:absolute и можно просто сделать вот так:

ul > li > ul {position:absolute} 
ul > li > ul ~ a {color: red}
<ul> 
  <li><a href="javascript://">Пункт 1</a></li> 
  <li><a href="javascript://">Пункт 2</a></li> 
  <li><a href="javascript://">Пункт 3</a></li> 
  <li><ul> 
        <li><a href="javascript://">Пункт 1</a></li> 
        <li><a href="javascript://">Пункт 2</a></li> 
        <li><a href="javascript://">Пункт 3</a></li> 
        <li><a href="javascript://">Пункт 4</a></li> 
      </ul> 
      <a href="javascript://">Пункт 4</a> 
  </li> 
</ul>

Но в html это выглядит странно.

Простите за такой идиотский вопрос, конечно, можно добавлять какой-то класс пунктам, которые имеют второе меню, но хотелось бы обойтись без этого

Answer 1

Выбрать предыдущего соседа с помощью селектора невозможен средствами CSS. И даже в черновике CSS4 на момент написания этой возможности нет.

Поэтому да, только

  1. Через класс для соответствующего элемента. Просто добавить класс в разметку вручную.
  2. Псевдоклассы nth-child и подобные, если это подходит для данного случая.
  3. Через JavaScript. Добавление класса или CSS-свойств через JavaScript.

  4. Меняя разметку (если возможно). Допустим есть элементы first и second. И нужно добавить селектор, когда first перед second. Можно это сделать через flexbox, для этого нужно их поменять местами в раз, применить селектор second + first, затем сделать чтобы order second был меньше first.

    Исполняемый код

.flex { 
  display: flex; 
} 
 
.second + .first { 
  color: red; 
  margin-right: 10px; 
} 
 
.second { 
  order: 2; 
} 
 
.first { 
  order: 1; 
}
<div class="flex"> 
  <div class="second"> 
    Second 
  </div> 
  <div class="first"> 
    First 
  </div> 
</div>

READ ALSO
Как подключить отдельные стили для IE10+?
CSS

Как подключить отдельные стили для IE10+?

Microsoft-то объявил, что теперь IE всё поддерживает, но по факту — c флексами беда, с бутстрапом — беда (по разному принимают отступы)

 676
Как сверстать блоки плиткой?
CSS

Как сверстать блоки плиткой?

Есть несколько div-блоков:

 508
Реализация автоподтягивания блока на react
CSS

Реализация автоподтягивания блока на react

Здравствуйте, есть список который имеет раскрывающийся блоки, нужно сделать так чтобы при раскрытии блок подтягивался по всей высоте, может...

 420
Вызов QMessageBox::critical()
c++

Вызов QMessageBox::critical()

Есть класс, не унаследованный от QWidgetПредставляет собой класс реализации доступа к БД

 407