Есть ли селектор CSS "предыдущий брат"?

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

Источник

35 ответов

Решение

Нет, селектор "предыдущий брат" отсутствует.

На связанной ноте, ~ предназначен для обычного наследника (то есть, элемент идет после этого, но не обязательно сразу после) и является селектором CSS3. + для следующего родного брата и CSS2.1.

См. Смежный братский комбинатор из Селекторов Уровня 3 и 5.7 Смежные соседние братские селекторы из Каскадных Таблиц Стилей Уровень 2 Редакция 1 (CSS 2.1) Спецификация.

Источник

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

previous:has(+ next) {}

… Но на момент написания этой статьи, это некоторое расстояние за гранью поддержки браузера.

Источник

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

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

/* 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>

Источник

Рассмотрим order свойство гибких и сеточных макетов.

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

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

В частности, гибкий 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. Используйте гибкий 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 свойство может быть использовано для изменения этого порядка.

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

Начальный order значение для всех элементов Flex - 0.

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

Примеры "предыдущих селекторов братьев и сестер", созданных с помощью 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 с помощью flex order имущество.

z-index Миф

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

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

9.9.1 Указание уровня стека: z-index имущество

z-index

  • Значение: авто | | унаследовать
  • По умолчанию: авто
  • Относится к: позиционированным элементам
  • Наследуется: нет
  • Проценты: нет данных
  • Медиа: визуальный
  • Расчетное значение: как указано

(выделение добавлено)

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

Элементы, которые являются гибкими элементами или элементами сетки, могут создавать контексты стека, даже когда position является static,

4,3. Flex Item Z-Ordering

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

5.4. Ось Z Порядок: z-index имущество

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

Вот демонстрация z-index работа с не позиционированными элементами Flex: https://jsfiddle.net/m0wddwxs/

Источник

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

x ~ y

записывать

y ~ x

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

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

Источник

Нет «предыдущий селектор», но вы можете использовать комбинацию :not а также ~("после селектора"). Никакого обратного порядка, никакого javascript.

Я думаю, что мой подход более прямолинеен, чем «стилизовать все блоки div, а не удалять стили после div», или использовать 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>

Источник

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

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

В обычном CSS есть 2 последовательных селектора:

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

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

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

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

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

В приведенном ниже примере:

  • .any-subsequent:hover ~ div выбирает любой последующий div
  • .immediate-subsequent:hover + div выбирает непосредственное последующее div
  • .any-previous:hover ! div выбирает любой предыдущий 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>

Источник

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

Что вы можете сделать, это использовать селектор 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>

Ограничения

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

В 2023 году всё изменилось. Теперь есть такой селектор:

          // 1 item before
    :has(+ .item:hover) {
        ...
    }

Если вы хотите выбрать 3 элемента раньше, вы делаете что-то вроде:

          // 3 items before
    :has(+ .item:hover),
    :has(+ .item + .item:hover),
    :has(+ .item + .item + .item:hover) {
        ...
    }

Посмотрите мою демо-версию здесь https://codepen.io/ro31337/pen/YzJbEZv.

Источник

Вы можете использовать двойное отрицание

      SELECTOR:not([SELECTOR]FILTER):not([SELECTOR]FILTER + SELECTOR) { ... }

Заменять SELECTOR либо с TAG или (Используя #IDвероятно, слишком конкретный). Заменять FILTER с некоторыми другими :PSUEDO-SELECTOR (Я только пробовал :hover) или же .CLASS (Больше для переключения через Javascript).

Поскольку типичное использование, вероятно, будет зависеть от зависания (см. Пример ниже)

      /* Effect only limited when hovering */
TAG.CLASS:not(TAG.CLASS:hover):not(TAG.CLASS:hover + TAG.CLASS) {}
/* Effect only applied when hovering */
PARENT.CLASS:hover > CHILD.CLASS:not(CHILD.CLASS:hover):not(CHILD.CLASS:hover + CHILD.CLASS) {}

Источник

Мое требование состояло в том, чтобы выбрать предыдущего и следующих двух братьев и сестер зависшего элемента с помощью ответа @Quentin. Я выбрал предыдущих братьев и сестер.

Источник

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

         ul li {
  color: red;
}

ul:hover li {
  color: blue;
}

ul:hover li:hover ~ li{
  color: red;
}
         <ul>
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
</ul>

Источник

Нет. Это невозможно через CSS. Он принимает "Каскад" близко к сердцу;-).

Однако, если вы сможете добавить JavaScript на свою страницу, немного jQuery поможет вам достичь конечной цели.
Вы можете использовать JQuery's find выполнить предварительный просмотр целевого элемента / класса / идентификатора, а затем вернуться назад, чтобы выбрать цель.
Затем вы используете jQuery, чтобы переписать DOM (CSS) для вашего элемента.

Основываясь на этом ответе Майка Бранта, может помочь следующий фрагмент jQuery.

$('p + ul').prev('p')

Это сначала выбирает все <ul> ы, которые сразу же следуют за <p>,
Затем он "возвращается", чтобы выбрать все предыдущие <p> из этого набора <ul> s.

По сути, "предыдущий брат" был выбран с помощью jQuery.
Теперь используйте .css функция для передачи в CSS новых значений для этого элемента.

В моем случае я искал способ выбрать DIV с идентификатором #full-width, но ТОЛЬКО если у него есть (косвенный) потомок DIV с классом .companies,

Я имел контроль над всем HTML под .companies, но не может изменить любой HTML-код над ним.
И каскад идет только в 1 направлении: вниз.

Таким образом я мог выбрать ВСЕ #full-width s.
Или я мог бы выбрать .companies это только следовало #full-width,
Но я не смог выбрать только #full-width с, что продолжалось .companies,

И, опять же, я не смог добавить .companies выше в HTML. Эта часть HTML была написана внешне, и обернула наш код.

Но с помощью jQuery я могу выбрать необходимый #full-width s, затем назначьте соответствующий стиль:

$("#full-width").find(".companies").parents("#full-width").css( "width", "300px" );

Это находит все #full-width .companies и выбирает только те .companies Аналогично тому, как селекторы используются для нацеливания на определенные элементы в стандарте в CSS.
Тогда он использует .parents "отказаться" и выбрать ВСЕХ родителей .companies,
но фильтрует эти результаты, чтобы сохранить только #fill-width элементы, так что в конце концов,
это только выбирает #full-width элемент, если он имеет .companies класс потомка.
Наконец, он назначает новый CSS (width) значение для результирующего элемента.

$(".parent").find(".change-parent").parents(".parent").css( "background-color", "darkred");
div {
  background-color: lightblue;
  width: 120px;
  height: 40px;
  border: 1px solid gray;
  padding: 5px;
}
.wrapper {
  background-color: blue;
  width: 250px;
  height: 165px;
}
.parent {
  background-color: green;
  width: 200px;
  height: 70px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<div class="wrapper">

  <div class="parent">
    "parent" turns red
    <div class="change-parent">
    descendant: "change-parent"
    </div>
  </div>
  
  <div class="parent">
    "parent" stays green
    <div class="nope">
    descendant: "nope"
    </div>
  </div>
  
</div>
Target <b>"<span style="color:darkgreen">parent</span>"</b> to turn <span style="color:red">red</span>.<br>
<b>Only</b> if it <b>has</b> a descendant of "change-parent".<br>
<br>
(reverse cascade, look ahead, parent un-descendant)
</html>

Справочные документы по jQuery:
$ () или jQuery (): элемент DOM.
, find: Получить потомков каждого элемента в текущем наборе соответствующих элементов, отфильтрованных селектором, объектом jQuery или элементом.
, родители: Получить непосредственно предшествующего брата каждого элемента в наборе соответствующих элементов. Если предоставляется селектор, он извлекает предыдущего родного брата, только если он соответствует этому селектору (фильтрует результаты, чтобы включить только перечисленные элементы / селекторы).
, css: установить одно или несколько свойств CSS для набора соответствующих элементов.

Источник

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

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

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

Вы также можете выбрать nth-child справа налево:

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

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

Источник

Я нашел самое простое решение. Это может применяться только в зависимости от того, что вы делаете.

Допустим, вы хотите навести указатель мыши на «sibling_2», чтобы изменить «sibling_1» в примере ниже:

Источник

Вы можете использовать:has()следующим образом.

      .thePrevious:has(+ .theNextSibling)

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

      .modal.show.modal--open:has(~ .modal.show.modal--open){
   opacity: 0;
 }
Источник

Не думайте, что здесь есть аналогичный ответ, поэтому попробуйте это. Предполагая HTML:

<ul>
  <li>before</li>
  <li class="target">target</li>
  <li>after</li>
  <li>after</li>
</ul>

Добавьте стиль для всех дочерних элементов, затем отмените стиль для цели и дочерних элементов вашей цели.

ul > li { color: red; }
ul > li.target, ul > li.target ~ li { color: inherit; }
Источник

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

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

<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>

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

Что бы хорошо, но не существует:

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 (или других тегов) внутри LI.

Источник

Нет, и есть.

Если вы должны поместить метку перед входом, просто поместите метку после входа и сохраните метку и вход внутри div и задайте стиль div, как показано ниже:

.input-box {
  display: flex;
  flex-direction: column-reverse;
}
<div class="input-box">
  <input
   id="email"
   class="form-item"           
   />

   <label for="email" class="form-item-header">                  
   E-Mail*                  
   </label>
</div>

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

Источник

На самом деле нет селектора, который мог бы выбрать предыдущего брата в css. Но можно использовать определенные приемы. Например, если вы хотите изменить стиль предыдущего элемента при наведении курсора на любой элемент, вы можете использовать это:

      <!DOCTYPE html>
<html lang="en">
<head>
  <style>
    .element:has(+ .next-element:hover){
      /* here your style for .element */
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="element"></div>
    <div class="next-element"></div>
  </div>
</body>
</html>

В этой ситуации, если вы наведете курсор на .next-element, стиль .element изменится, как вы определили выше.

Источник

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

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

В этом примере я использую FontAwesome и меняю местами юникоды fa-star-o и fa-star 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/

Источник

Мне нужно решение, чтобы выбрать предыдущий родной брат tr. Я придумал это решение, используя компоненты React и Styled. Это не мое точное решение (это по памяти, часы спустя). Я знаю, что есть ошибка в функции setHighlighterRow.

OnMouseOver для строки установит индекс строки в состояние и повторно отобразит предыдущую строку с новым цветом фона

class ReactClass extends Component {
  constructor() {
    this.state = {
       highlightRowIndex: null
    }
  }

  setHighlightedRow = (index) => {
    const highlightRowIndex = index === null ? null : index - 1;
    this.setState({highlightRowIndex});
  }

  render() {
    return (
       <Table>
        <Tbody>
           {arr.map((row, index) => {
                const isHighlighted = index === this.state.highlightRowIndex
                return {
                    <Trow 
                        isHighlighted={isHighlighted}
                        onMouseOver={() => this.setHighlightedRow(index)}
                        onMouseOut={() => this.setHighlightedRow(null)}
                        >
                        ...
                    </Trow>
                }
           })}  
        </Tbody>   
       </Table>
    )
  }
}

const Trow = styled.tr`
    & td {
        background-color: ${p => p.isHighlighted ? 'red' : 'white'};
    }

    &:hover {
        background-color: red;
    }
`;
Источник

Я исправил эту проблему, поместив свои элементы в flexbox, а затем используя flex-direction: flex-reverse.

Затем мне пришлось вручную инвертировать элементы в HTML (поместить их в обратном порядке), и это выглядело нормально, и это сработало!

      <div style="display: flex; flex-direction: flex-reverse">
  <a class="element2">Element 2</a>
  <a class="element1">Element 1</a>
</div>
...
<style>
  .element2:hover + element1 {
    ...
  }
</style>
Источник

Такого селектора нет, но в DOM api есть довольно удобное свойство только для чтения.

Node.previousSibling

https://developer.mozilla.org/en-US/docs/Web/API/Node/previousSibling

Источник

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

  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>

Надеюсь, это поможет кому-то.

Источник

Для моего варианта использования было необходимо изменить предыдущий стиль элемента в фокусе и навести только 2 элемента в родительском элементе. для этого использовали а также псевдокласс.

например, выбирая каждый раз, когда происходит событие фокусировки / наведения

Источник

Вот ссылка на аналогичный вопрос

CSS выбирает всех предыдущих братьев и сестер для звездного рейтинга

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

         // Just to check input value
// Consts
const starRadios = document.querySelectorAll('input[name="rating"]');

// EventListeners
starRadios.forEach((radio) => radio.addEventListener('change', getStarRadioValue));

// Get star radio value
function getStarRadioValue(event) { 
    alert(event.target.value) 
    // Do something with it
};
         .star-rating {
  font-size: 1.5rem;
  unicode-bidi: bidi-override;
  direction: rtl;
  text-align: left;
}
.star-rating.editable label:hover {
  cursor: pointer;
}
.star-rating.editable .icon-star:hover,
.star-rating.editable .icon-star:hover ~ .icon-star {
  background-color: #fb2727 !important;
}

.icon-star {
  position: relative;
  background-color: #72747d;
  width: 32px;
  height: 32px;
  display: inline-block;
  transition: background-color 0.3s ease;
}
.icon-star.filled {
  background-color: #fb2727;
}

.icon-star > label {
  display: inline-block;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  position: absolute;
}

.icon-star > label > input[type="radio"] {
  position: absolute;
  top: 0;
  left: 0;
  transform: translateY(50%) translateX(50%);
  display: none;
}
         <div class="star-rating editable">
  <span class="icon-star">
    <label>
      <input type="radio" name="rating"  value="5" />
    </label>
  </span>
  <span class="icon-star">
    <label>
      <input type="radio" name="rating" value="4" />
    </label>
  </span>
  <span class="icon-star">
    <label>
      <input type="radio" name="rating" value="3" />
    </label>
  </span>
  <span class="icon-star">
    <label>
      <input type="radio" name="rating" value="2" />
    </label>
  </span>
  <span class="icon-star">
    <label>
      <input type="radio" name="rating"  value="1" />
    </label>
  </span>
</div>

Источник

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

Источник
Другие вопросы по тегам