Я нашел способ стилизовать всех предыдущих братьев и сестер (напротив ~), которые могут работать в зависимости от того, что вам нужно.

допустим, у вас есть список ссылок и при наведении на один, все предыдущие должны стать красными. Вы можете сделать это так:

/* default link color is blue */
.parent a {
  color: blue;
}

/* prev siblings should be red */
.parent:hover a {
  color: red;
}
.parent a:hover,
.parent a:hover ~ a {
  color: blue;
}

<div class="parent">
  <a href="#">link</a>
  <a href="#">link</a>
  <a href="#">link</a>
  <a href="#">link</a>
  <a href="#">link</a>
</div>

селекторы Уровень 4 вводит :has() (ранее предметный указатель !), который позволит вам выбрать предыдущий брат с:

previous:has(+ next) {}

... но на момент написания статьи это некоторое расстояние за пределами кровоточащего края для поддержки браузера.

рассмотрим order свойство flex и сетки макетов.

я сосредоточусь на flexbox в примерах ниже, но те же самые понятия применяются к сетке.

---

С помощью flexbox можно смоделировать предыдущий селектор братьев и сестер.

в частности, flex order свойство может перемещать элементы по экрану.

вот пример:

вы хотите, чтобы элемент A стал красным, когда элемент B, который завис.

<ul>
    <li>A</li>
    <li>B</li>
</ul>

шаги

1. сделать ul контейнер.
   
   

   ul { display: flex; }
   

---

1. обратный порядок братьев и сестер в наценке.
   
   

   <ul>
      <li>B</li>
      <li>A</li>
   </ul>
   

---

1. используйте одноуровневый селектор для целевого элемента A (~ или + будет делать) .
   
   

   li:hover + li { background-color: red; }
   

---

1. используйте flex order свойство для восстановления порядка братьев и сестер на визуальном дисплее.
   
   

   li:last-child { order: -1; }
   

---

...и вуаля! Рождается (или, по крайней мере, имитируется) предыдущий селектор братьев и сестер.

вот полный код:

ul {
    display: flex;
}

li:hover + li {
    background-color: red;
}

li:last-child {
    order: -1;
}

/* non-essential decorative styles */
li {
    height: 200px;
    width: 200px;
    background-color: aqua;
    margin: 5px;
    list-style-type: none;
    cursor: pointer;
}

<ul>
    <li>B</li>
    <li>A</li>
</ul>

из flexbox спецификация:

5.4. Порядок отображения:order свойства

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

The order свойство управляет порядком отображения элементов flex в контейнере flex, назначая их порядковым группам. Это занимает один <integer> значение, которое указывает порядковый номер группы гибкого элемента принадлежать.

исходная order значение для всех элементов flex равно 0.

см. Также order в спецификации макета сетки CSS.

---

примеры "предыдущих селекторов братьев и сестер", созданных с помощью flex order свойство.

.container { display: flex; }

.box5 { order: 1; }    
.box5:hover + .box4 { background-color: orangered; font-size: 1.5em; }

.box6 { order: -4; }
.box7 { order: -3; }
.box8 { order: -2; }
.box9 { order: -1; }
.box9:hover ~ :not(.box12):nth-child(-1n+5) { background-color: orangered;
                                              font-size: 1.5em; }
.box12 { order: 2; }
.box12:hover ~ :nth-last-child(-1n+2) { background-color: orangered;
                                        font-size: 1.5em; }
.box21 { order: 1; }
.box21:hover ~ .box { background-color: orangered; font-size: 1.5em; }

/* non-essential decorative styles */
.container {
    padding: 5px;
    background-color: #888;
}
.box {
    height: 50px;
    width: 75px;
    margin: 5px;
    background-color: lightgreen;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    cursor: pointer;
}

<p>
Using the flex <code>order</code> property to construct a previous sibling selector
</p>

<div class="container">
    <div class="box box1"><span>1</span></div>
    <div class="box box2"><span>2</span></div>
    <div class="box box3"><span>3</span></div>
    <div class="box box5"><span>HOVER ME</span></div>
    <div class="box box4"><span>4</span></div>
</div>

<br>

<div class="container">
    <div class="box box9"><span>HOVER ME</span></div>
    <div class="box box12"><span>HOVER ME</span></div>
    <div class="box box6"><span>6</span></div>
    <div class="box box7"><span>7</span></div>
    <div class="box box8"><span>8</span></div>
    <div class="box box10"><span>10</span></div>
    <div class="box box11"><span>11</span></div>
</div>

<br>

<div class="container">
    <div class="box box21"><span>HOVER ME</span></div>
    <div class="box box13"><span>13</span></div>
    <div class="box box14"><span>14</span></div>
    <div class="box box15"><span>15</span></div>
    <div class="box box16"><span>16</span></div>
    <div class="box box17"><span>17</span></div>
    <div class="box box18"><span>18</span></div>
    <div class="box box19"><span>19</span></div>
    <div class="box box20"><span>20</span></div>
</div>

jsFiddle

---

Примечание-два устаревших представления о CSS

Flexbox разрушает давние убеждения о CSS.

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

сказать, что эта вера широко распространена, было бы преуменьшением. Вот выборка связанных вопросов только по переполнению стека:

• выберите предыдущий брат элемента в CSS с помощью селекторов
• CSS: выберите предыдущий брат
• CSS выберите предыдущий брат
• предыдущий смежный селектор в CSS
• выберите предыдущие братья и сестры при наведении
• селектор CSS чтобы получить предыдущий брат
• изменить цвет родственных элементов при наведении с помощью CSS
• как выбрать предыдущий брат, используя синтаксис selenium css
• селектор CSS для выбора элемента, который предшествует другому элементу?
• как добавить стиль к предыдущему брату активного ввода, используя только CSS
• селектор CSS для следующего и предыдущие элементы
• как повлиять на другие элементы при наведении div

order собственность.

The z-index миф

еще одно давнее убеждение заключалось в том, что z-index работает только для позиционированных элементов.

в самом деле, самая последняя версия спецификации-the проект редактора W3C – по-прежнему утверждает, что это правда:

9.9.1 указание уровня стека:z-index собственность

z-index

• значение: auto / / inherit
• Initial: auto
• применяется к: расположенным элементам
• наследуется: нет
• Проценты: N / A
• средства массовой информации: визуальный
• вычисляемое значение: как задано

_{(курсив)}

на самом деле, однако, эта информация устарела и неточна.

элементов гибкий график работы пунктов или решетки предметы может создавать контексты укладки, даже когда position и static.

4.3. Гибкий Элемент З-Заказ

элементы Flex рисуют точно так же, как встроенные блоки, за исключением того, что порядок-измененный порядок документов используется вместо raw порядок документов, и z-index значения auto создать контекст стекирования, даже если position и static.

5.4. Упорядочение по оси Z: The z-index свойства

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

вот демонстрация z-index работа на не-расположенных деталях гибкого трубопровода: https://jsfiddle.net/m0wddwxs/

у меня был тот же вопрос, но тогда у меня был момент "duh". Вместо того, чтобы писать

x ~ y

написать

y ~ x

очевидно, что это соответствует "x "вместо" y", но он отвечает на " есть ли совпадение?"вопрос, и простой обход DOM может привести вас к правильному элементу более эффективно, чем цикл в javascript.

Я понимаю, что исходный вопрос был вопросом CSS, поэтому этот ответ, вероятно, совершенно неуместен, но другие пользователи Javascript могут натыкаемся на вопрос через поиск, как я сделал.

два хитрости. В основном инвертирование порядка HTML ваших желаемых элементов в HTML и использование
~далее братья и сестры оператор:

float-right+ обратный порядок элементов HTML

div{ /* Do with the parent whatever you know just to make the
  inner float-right elements appear where desired */
  display:inline-block;
}
span{
  float:right;  /* float-right the elements! */
}
span:hover ~ span{ /* On hover target it's "previous";) elements */
  background:red;
} 

<div>
  <!-- Reverse the order of inner elements -->
  <span>5</span>
  <span>4</span>
  <span>3</span>
  <span>2</span>
  <span>1</span>
</div>

---

родитель direction: rtl; + обратный порядок внутренних элементов

.inverse{
  direction: rtl;
  display: inline-block; /* inline-block to keep parent at the left of window */
}
span:hover ~ span{ /* On hover target it's "previous";) elements */
  background:gold;
}

Hover one span and see the previous elements being targeted!<br>

<div class="inverse">
  <!-- Reverse the order of inner elements -->
  <span>5</span>
  <span>4</span>
  <span>3</span>
  <span>2</span>
  <span>1</span>
</div>

на данный момент нет официального способа сделать это, но вы можете использовать небольшой трюк для достижения этой цели ! Помните, что это экспериментально и имеет некоторые ограничения ... (проверьте этой ссылке если вы беспокоитесь о совместимости навигатора)

что вы можете сделать, это использовать CSS3 селектор: псевдо-класс называется nth-child()

#list>* {
  display: inline-block;
  padding: 20px 28px;
  margin-right: 5px;
  border: 1px solid #bbb;
  background: #ddd;
  color: #444;
  margin: 0.4em 0;
}

#list :nth-child(-n+4) {
  color: #600b90;
  border: 1px dashed red;
  background: orange;
}

<p>The oranges elements are the previous sibling li selected using li:nth-child(-n+4)</p>

<div id="list">
  <span>1</span><!-- this will be selected -->
  <p>2</p><!-- this will be selected -->
  <p>3</p><!-- this will be selected -->
  <div>4</div><!-- this will be selected -->
  <div>5</div>
  <p>6</p>
  <p>7</p>
  <p>8</p>
  <p>9</p>
</div>

ограничения

• вы не можете выбрать предыдущие элементы на основе классы следующих элементов
• это то же самое для псевдоклассов

+ для следующего брата. Есть ли эквивалент для предыдущего брат или сестра?

вы можете использовать два топор селекторы: ! и ?

здесь 2 последующие селекторы братьев и сестер в обычном CSS:

• + - это немедленно последующий родственный селектор
• ~ - это любой последующий родственный селектор

в обычном CSS, есть нет предыдущего селектора братьев и сестер.

однако, в топор CSS постпроцессорная библиотека, есть 2 предыдущие селекторы братьев и сестер:

• ? - это немедленно предыдущий селектор братьев и сестер (напротив +)
• ! - это любой предыдущий одноуровневый элемент селектор (напротив ~)

Пример:

в примере ниже:

• .any-subsequent:hover ~ div выбирает любой последующий div
• .immediate-subsequent:hover + div выбирает немедленное последующее div
• .any-previous:hover ! div выбирает
• .immediate-previous:hover ? div выбирает непосредственно предыдущий div

div {
  display: inline-block;
  width: 60px;
  height: 100px;
  color: rgb(255, 255, 255);
  background-color: rgb(255, 0, 0);
  text-align: center;
  vertical-align: top;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.6s ease-out;
}

code {
  display: block;
  margin: 4px;
  font-size: 24px;
  line-height: 24px;
  background-color: rgba(0, 0, 0, 0.5);
}

div:nth-of-type(-n+4) {
  background-color: rgb(0, 0, 255);
}

div:nth-of-type(n+3):nth-of-type(-n+6) {
  opacity: 1;
}

.any-subsequent:hover ~ div,
.immediate-subsequent:hover + div,
.any-previous:hover ! div,
.immediate-previous:hover ? div {
  opacity: 1;
}

<h2>Hover over any of the blocks below</h2>

<div></div>
<div></div>

<div class="immediate-previous">Hover for <code>?</code> selector</div>
<div class="any-previous">Hover for <code>!</code> selector</div>
<div class="any-subsequent">Hover for <code>~</code> selector</div>
<div class="immediate-subsequent">Hover for <code>+</code> selector</div>

<div></div>
<div></div>

<script src="https://rouninmedia.github.io/axe/axe.js"></script>

другое решение flexbox

вы можете использовать обратный порядок элементов в HTML. Тогда помимо использования order а в Michael_B это можно использовать flex-direction: row-reverse; или flex-direction: column-reverse; в зависимости от вашего макета.

рабочий пример:

.flex {
  display: flex;
  flex-direction: row-reverse;
   /* Align content at the "reversed" end i.e. beginning */
  justify-content: flex-end;
}

/* On hover target its "previous" elements */
.flex-item:hover ~ .flex-item {
  background-color: lime;
}

/* styles just for demo */
.flex-item {
  background-color: orange;
  color: white;
  padding: 20px;
  font-size: 3rem;
  border-radius: 50%;
}

<div class="flex">
  <div class="flex-item">5</div>
  <div class="flex-item">4</div>
  <div class="flex-item">3</div>
  <div class="flex-item">2</div>
  <div class="flex-item">1</div>
</div>

если вы знаете точное положение :nth-child()на основе исключения всех последующих братьев и сестер будет работать.

ul li:not(:nth-child(n+3))

что бы выделить все liперед 3-й (например, 1 и 2). Но, на мой взгляд, это выглядит некрасиво и очень плотно usecase.

вы также можете выбрать N-й ребенок справа налево:

ul li:nth-child(-n+2)

который делает то же самое.

к сожалению, нет" предыдущего " селектора братьев, но вы можете возможно по-прежнему получить тот же эффект с помощью позиционирования (например, поплавок справа). Это зависит от того, что вы пытаетесь сделать.

в моем случае, я хотел в первую очередь CSS 5-звездочный рейтинг системы. Мне нужно будет покрасить (или поменять значок) предыдущие звезды. Плавая каждый элемент справа, я по существу получаю тот же эффект (html для звезд, таким образом, должен быть написан "назад").

Я использую в этом примере FontAwesome и обмен между юникоды из Альфа-стар-O и Альфа-стар http://fortawesome.github.io/Font-Awesome/

CSS:

.fa {
    display: inline-block;
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* set all stars to 'empty star' */
.stars-container {
    display: inline-block;      
}   

/* set all stars to 'empty star' */
.stars-container .star {
    float: right;
    display: inline-block;
    padding: 2px;
    color: orange;
    cursor: pointer;

}

.stars-container .star:before {
    content: "\f006"; /* fontAwesome empty star code */
}

/* set hovered star to 'filled star' */
.star:hover:before{
    content: "\f005"; /* fontAwesome filled star code */
}

/* set all stars after hovered to'filled star' 
** it will appear that it selects all after due to positioning */
.star:hover ~ .star:before {
    content: "\f005"; /* fontAwesome filled star code */
}

HTML: (40)

JSFiddle: http://jsfiddle.net/andrewleyva/88j0105g/

В зависимости от вашей точной цели, есть способ достичь полезности родительского селектора без его использования (даже если он должен был существовать)...

скажем, у нас есть:

<div>
  <ul>
    <li><a>Pants</a></li>
    <li><a>Socks</a></li>
    <ul>
      <li><a>White socks</a></li>
      <li><a>Blue socks</a></li>
    </ul>
  </ul>
</div>

что мы можем сделать, чтобы блок Носков (включая цвета носков) выделялся визуально с помощью интервала?

что было бы хорошо, но нет:

ul li ul:parent {
  margin-top: 15px;
  margin-bottom: 15px;
}

что есть:

li > a {
  margin-top: 15px;
  display: block;
}
li > a:only-child {
  margin-top: 0px;
}

это устанавливает все якорные ссылки, чтобы иметь 15px маржу на вершине и сбрасывает его обратно в 0 для тех, у кого нет элементов UL (или других тегов) внутри LIs.

У меня была аналогичная проблема и выяснилось, что все проблемы такого рода можно решить следующим образом:

1. дайте всем вашим деталям стиль.
2. дайте выбранному элементу стиль.
3. дайте следующим элементам стиль, используя + или ~.

и таким образом Вы сможете стилизовать свои текущие, предыдущие элементы(все элементы, переопределенные текущими и следующими элементами) и ваши следующие элементы.

пример:

/* all items (will be styled as previous) */
li {
  color: blue;
}

/* the item i want to distinguish */
li.milk {
  color: red;
}

/* next items */
li ~ li  {
  color: green;
}


<ul>
  <li>Tea</li>
  <li class="milk">Milk</li>
  <li>Juice</li>
  <li>others</li>
</ul>

надеюсь, что это помогает кто-то.

как уже много раз сказано - с div ~ p все <p> элементы, которым предшествует a <div> элемент выбран.

проверить этот список всех селекторов CSS.