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

#css

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

Вот мой html код:




  
Пункт 1
  
Пункт 2
  
Пункт 3
  
Пункт 4
      

        
Пункт 1
        
Пункт 2
        
Пункт 3
        
Пункт 4
      
  





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



ul > li > ul {position:absolute}
ul > li > ul ~ a {color: red}

  
Пункт 1
  
Пункт 2
  
Пункт 3
  

        
Пункт 1
        
Пункт 2
        
Пункт 3
        
Пункт 4
      
      Пункт 4
  





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

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

Ответы

Ответ 1

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

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


Через класс для соответствующего элемента. Просто добавить класс в разметку вручную.
Псевдоклассы nth-child и подобные, если это подходит для данного случая.
Инвертирование разметки (расположение элементов в обратном порядке в разметке) и
применение flexbox.

Мы можем инвертировать элементы либо через row-reverse/column-reverse, либо через
свойство order.

Допустим есть элементы first и second. И нужно добавить селектор, когда first перед
second. Для этого нужно их поменять местами, затем применить селектор second + first.

Первый способ (предпочтительный): Затем присваиваем контейнеру flex-direction: row-reverse;
или flex-direction: column-reverse; в зависимости от разметки:



.flex {
  display: flex;
  flex-direction: row-reverse;
}

.second + .first {
  color: red;
  margin-right: 10px;
}

  

    Second
  
  

    First
  





Второй способ: Затем делаем order second меньше first:



.flex {
  display: flex;
}

.second + .first {
  color: red;
  margin-right: 10px;
}

.second {
  order: 2;
}

.first {
  order: 1;
}

  

    Second
  
  

    First
  




Через JavaScript. Добавление класса или CSS-свойств через JavaScript.


Ответ 2

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



a:link, a:visited, a:hover, a:active {
  color: red;
}

a:last-child:link, a:last-child:visited, a:last-child:hover, a:last-child:active {
  color: blue;
}

a:hover, a:active {
  opacity: .5;
}

  
Пункт 1
  
Пункт 2
  
Пункт 3
  
Пункт 4
      

        
Пункт 1
        
Пункт 2
        
Пункт 3
        
Пункт 4
      
  



Ответ 3

Есть такая возможность выделение элементов слева:

Суть в том, что, с помощью display: flex; и свойства flex-direction: row-reverse;
у контейнера, вы можете изменить порядок элементов на обратный и тогда все выделения
css правых элементов будут выделять левые элементы.

less/saas:

  .container {
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
  }
  .elem {
    background: red;
    width: 48px;
    height: 48px;
  }
  .elem:hover, .elem.active {
    background: blue;
    & ~ .elem {
      background: blue;
    }
  }


css:

  .container {
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
  }
  .elem {
    background: red;
    width: 48px;
    height: 48px;
  }
  .elem:hover {
    background: blue;
  }

  .elem:hover ~ .elem {
      background: blue;
  }