orderフレックスレイアウトとグリッドレイアウトのプロパティを検討します。
以下の例ではflexboxに焦点を当てますが、同じ概念がグリッドにも適用されます。
フレックスボックスを使用すると、以前の兄弟セレクターをシミュレートできます。
特に、flex orderプロパティは画面内で要素を移動できます。
次に例を示します。
要素Bにカーソルを合わせると、要素Aが赤くなります。
<ul>
<li>A</li>
<li>B</li>
</ul>
手順
作りulフレックスコンテナ。
ul { display: flex; }
マークアップ内の兄弟の順序を逆にします。
<ul>
<li>B</li>
<li>A</li>
</ul>
兄弟セレクターを使用して、要素Aをターゲットにします（~または+そうします）。
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>
フレックスボックス仕様から：
5.4。表示順序：orderプロパティ
Flexアイテムは、デフォルトでは、ソースドキュメントに表示されるのと同じ順序で表示およびレイアウトされます。の
orderプロパティは、この順序を変更するために使用することができます。
このorderプロパティは、フレックスアイテムを序数グループに割り当てることにより、フレックスコンテナー内に表示される順序を制御します。<integer>フレックスアイテムが属する序数グループを指定する単一の値を取ります。
orderすべてのフレックスアイテムの初期値は0です。
orderCSSグリッドレイアウトの仕様もご覧ください。
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>
余談– CSSに関する2つの時代遅れの信念
Flexboxは、CSSに関する長年の信念を打ち砕いています。
そのような信念の1つは、以前の兄弟セレクターはCSSでは不可能であるというものです。です。
この信念が広まっていると言うのは控えめな表現でしょう。Stack Overflowのみに関する関連質問の例を以下に示します。
上記のように、この信念は完全に真実ではありません。以前の兄弟セレクターは、flex orderプロパティを使用してCSSでシミュレートできます。
z-index神話
もう1つの長年の信念はz-index、配置された要素でのみ機能するというものです。
実際、最新バージョンの仕様（W3C Editor's Draft）では、これが真実であると主張しています。
9.9.1スタックレベルの指定：z-index
プロパティ
z-index
- 値：auto | | 受け継ぐ
- 初期：自動
- 適用対象：配置された要素
- 継承：いいえ
- パーセンテージ：なし
- メディア：ビジュアル
- 計算値：指定どおり
（強調を追加）
ただし、実際には、この情報は古く、不正確です。
ある要素フレックス項目またはグリッド項目は、場合でも、スタッキングコンテキストを作成することができますpositionですstatic。
4.3。フレックスアイテムのZオーダー
フレックスアイテムは、生文書順の代わりに使用されるため、変更された文書の順序を除いて、正確に、インラインブロックと同じペイント、およびz-index以外の値autoとしてもスタッキングコンテキストを作成しpositionていますstatic。
5.4。Z軸の順序：z-indexプロパティ
グリッド項目の塗装順序は正確生文書順の代わりに使用されるため、変更された文書の順序を除いて、インラインブロックと同じであり、そしてz-index以外の値autoとしてもスタッキングコンテキストを作成し
positionていますstatic。
以下は、z-index配置されていないflexアイテムでの作業のデモンストレーションです：https : //jsfiddle.net/m0wddwxs/