css - 間接セレクタ - 隣接セレクタ

「前の兄弟」のCSSセレクタはありますか? (9)

+は次の兄弟のためのものです。前の兄弟に相当するものはありますか？

2つのaxセレクタを使用することができます： `!` そして`?`

従来のCSSには、 2つの後続の兄弟セレクタがあります。

+は直後の兄弟セレクタです
~は、その後の任意の兄弟セレクタです。

従来のCSSでは、 以前の兄弟セレクタはありません 。

しかし、 ax CSSのポストプロセッサライブラリには、 2つ前の兄弟セレクタがあります：

? 直前の兄弟セレクタ（ +反対側）
! 以前の兄弟セレクタ（ ~反対側）

実施例：

以下の例では、

.any-subsequent:hover ~ divを選択します
.immediate-subsequent:hover + divは直後の.immediate-subsequent:hover + divを選択します。
.any-previous:hover ! div .any-previous:hover ! divは前の.any-previous:hover ! divを選択します
.immediate-previous:hover ? div .immediate-previous:hover ? divは直前の.immediate-previous:hover ? 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>

+は次の兄弟のためのものです。前の兄弟に相当するものはありますか？

フレックスとグリッドレイアウトの`order`プロパティを考えてみましょう。

以下の例ではflexboxに焦点を当てますが、Gridにも同じ概念が適用されます。

フレックスボックスを使用すると、前の兄弟セレクタをシミュレートできます。

特に、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に使用できます。
orderプロパティは、flexコンテナ内に表示されるフレックスアイテムの順序をコントロールします。フレックスアイテムは、順序グループに割り当てられます。フレックスアイテムが属する序数グループを指定する単一の<integer>値をとります。

すべてのフレックスアイテムの初期order値は0です。

また、CSSグリッドレイアウト仕様のorderを参照してください。

フレックス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に関する2つの古い信念

Flexboxは、CSSに関する長年にわたる信念を破っています。

そのような信念の1つは、以前の兄弟セレクタがCSSでは使用できないということです。

この信念が広がっていると言うのは、控えめな言い方です。だけに関する関連する質問のサンプルは次のとおりです。

セレクタを使用してCSS内の要素の前の兄弟を選択する
CSS：前の兄弟を選択
CSSは前の兄弟を選択する
CSSの以前の隣接セレクタ
ホバー上の前の兄弟を選択
直前の兄弟を取得するCSSセレクタ
CSSを使用して、ホバー上の兄弟要素の色を変更する
セレンのcss構文を使用して前の兄弟を選択する方法
CSS別の要素の前に来る要素を選択するためのセレクタ？
CSSのみを使用してアクティブ入力の前の兄弟にスタイリングを追加する方法
次要素と前要素のCSSセレクタ
divが表示されたときに他の要素にどのように影響するか

上記のように、この信念は完全に真実ではありません。以前の兄弟セレクタは、flex orderプロパティを使用してCSSでシミュレートできます。

z-index神話

もう一つの長年の信念は、 z-indexが位置付けられた要素に対してのみ働くということです。

実際、 W3C編集者のドラフトである最新版の仕様では、これが真だと主張しています。

9.9.1スタックレベルの指定： z-indexプロパティ
z-index

値：auto | | 継承する
頭文字：auto
対象：配置要素
継承：いいえ
パーセンテージ：N / A
メディア：ビジュアル
計算値：指定通り
_{（強調が加えられた）}

しかし、実際には、この情報は時代遅れで不正確です。

フレックスアイテムまたはグリッドアイテムである要素は、 positionがstaticあってもスタッキングコンテキストを作成できます。

4.3。 フレックスアイテムZオーダー
Flexのアイテムは、インラインブロックとまったく同じようにペイントします。ただし、ドキュメントの順序は原文の代わりに順序が変更されたドキュメントの順序が使用され、 staticあってもスタッキングのコンテキストはauto以外のz-index
5.4。 Z軸の順序付け： z-indexプロパティ
グリッド項目の塗りつぶし順序は、元の文書順序の代わりに順序変更された文書順序が使用され、 positionがstaticあってもauto以外のz-index値がスタッキングコンテキストを作成する点を除いて、インラインブロックとまったく同じです。

ここでは、位置付けられていないフレックスアイテムで動作するz-indexデモンストレーションがあります： https://jsfiddle.net/m0wddwxs/ : https://jsfiddle.net/m0wddwxs/

2つのトリック 。基本的に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;`親`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>

セレクタレベル4 :has() （以前は主題インジケータ! ）を導入してい:has() !これにより、前の兄弟を次のもので選択することができます：

previous:has(+ next) {}

...しかし、執筆の時点では、ブラウザのサポートのために、ある程度遠く離れています。

いいえ、「前の兄弟」セレクタはありません。

関連するメモでは、 ~は一般的な後続兄弟（要素がこの要素の後に来るが、必ずしも後であるという意味で）を意味し、CSS3セレクタです。 +は次の兄弟用でCSS2.1です。

Selectors Level 3および5.7から隣接した兄弟コンビネータを参照してください。カスケードスタイルシートレベル2リビジョン1（CSS 2.1）仕様の隣接兄弟セレクタ

正確な位置を知っていれば、次のすべての兄弟の:nth-child()ベースの除外が機能します。

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

3番目（例えば1番目と2番目）の前にすべてのliを選択します。しかし、私の意見では、これは醜く見え、非常にタイトなユースケースを持っています。

また、右から左へn番目の子供を選択することもできます：

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

同じことをします。

現時点でそれを行う公式の方法はありませんが、これを達成するために少しトリックを使用することができます！実験的であり、いくつかの制限があることを忘れないでください（ナビゲータとの互換性についてはこのリンクをチェックしてください）

あなたができることは、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>

制限事項

次の要素のクラスに基づいて以前の要素を選択することはできません
これは疑似クラスでも同じです

私はあなたが必要とするものに応じて動作するかもしれないすべての以前の兄弟（ ~反対側）をスタイルする方法を見つけました。

あなたがリンクのリストを持っているとしましょう、1つをホバリングすると、すべての前のものが赤くなるはずです。あなたは次のようにすることができます：

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

私は同様の問題を抱えており、この性質のすべての問題は次のように解決できることを発見しました。

あなたのすべてのアイテムにスタイルを与えます。
選択したアイテムにスタイルを与えます。
+や〜を使って次のアイテムにスタイルを与えます。

これにより、現在の前のアイテム（現在のアイテムと次のアイテムで上書きされたアイテム）と次のアイテムのスタイルを設定できます。

例：

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

誰かを助けることを願っています。

css - 間接セレクタ - 隣接セレクタ

「前の兄弟」のCSSセレクタはありますか? (9)

2つのaxセレクタを使用することができます： ! そして?

フレックスとグリッドレイアウトのorderプロパティを考えてみましょう。