Рассмотрим свойство order макетов flex и grid.
Я сконцентрируюсь на flexbox в примерах ниже, но те же понятия применимы к Grid.
С помощью flexbox можно смоделировать предыдущий селектор брата.
В частности, свойство flex order может перемещать элементы по экрану.
Вот пример:
Вы хотите, чтобы элемент A становился красным при наведении на элемент B.
<ul>
<li>A</li>
<li>B</li>
</ul>
ШАГОВ
Сделать ul гибкий контейнер.
ul { display: flex; }
Обратный порядок братьев и сестер в разметке.
<ul>
<li>B</li>
<li>A</li>
</ul>
Используйте селектор брата для выбора элемента А (подойдет ~ или +).
li:hover + li { background-color: red; }
Используйте свойство 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 свойство может быть использовано для изменения этого порядка.
Свойство order управляет порядком, в котором элементы flex отображаются в контейнере flex, назначая их порядковым группам. Он принимает одно значение <integer>, которое указывает, какая порядковая группа гибкого элемента
принадлежит.
Начальное значение order для всех изгибаемых элементов равно 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>
Примечание к сведению & ndash; Два устаревших представления о CSS
Flexbox разрушает давние представления о CSS.
Одно из таких убеждений состоит в том, что предыдущий селектор брата не возможен в CSS .
Сказать, что это убеждение широко распространено, было бы преуменьшением. Вот несколько вопросов, связанных с переполнением стека:
Как описано выше, это убеждение не совсем верно. Предыдущий селектор родного брата может быть смоделирован в CSS с помощью свойства flex order.
z-index Миф
Другое давнее убеждение заключается в том, что z-index работает только на позиционированных элементах.
На самом деле, самая последняя версия спецификации & ndash; W3C Editor's Draft & ndash; по-прежнему утверждает, что это правда:
9.9.1 Задание уровня стека: z-index
свойство
z-index
- Значение: авто | | наследовать
- По умолчанию: авто
- Относится к: позиционированным элементам
- Наследуется: нет
- Проценты: N / A
- Носитель: визуальный
- Расчетное значение: как указано
(выделение добавлено)
Однако в действительности эта информация устарела и неточна.
Элементы, которые гибкие элементы или элементы сетки могут создавать стеки контексты, даже когда position равен static.
4,3. Гибкий элемент Z-Ordering
Элементы Flex отображаются точно так же, как и встроенные блоки, за исключением того, что вместо необработанных документов используется порядок документов с измененным порядком.
порядок документа и значения z-index, отличные от auto, создают контекст стека, даже если position равно static.
5,4. Ось Z Порядок: свойство z-index
Порядок рисования элементов сетки точно такой же, как у встроенных блоков, за исключением того, что порядок документов с измененным порядком равен
используется вместо исходного порядка документов, и значения z-index, отличные от auto, создают контекст стека, даже если
position это static.
Вот демонстрация z-index работы с не позиционированными гибкими элементами: https://jsfiddle.net/m0wddwxs/