css - 「前の兄弟」セレクターはありますか?

プラス記号セレクター (+) は、次に隣接する兄弟を選択するためのものです。

前の兄弟に相当するものはありますか?

------------------------

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

関連したメモとして、~ は一般的な後継兄弟 (要素がこの要素の後に来るが、必ずしも直後であるとは限らないことを意味します) を表し、CSS3 セレクターです。 + は次の兄弟を表し、CSS2.1 です。

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

2009 年 11 月 30 日 4:08 に回答

クレタス

クレタス

619,000

169 個

169 個の金バッジ

915 個

銀バッジ 915 個

銅バッジ 944 個

銅バッジ 944 個

6

20

CSS3 標準より: 2 つのシーケンスで表される要素は、ドキュメント ツリー内の同じ親と最初のシーケンスで表される要素を共有します。ce は、2 番目の要素で表される要素の前に (すぐとは限りませんが) 配置されます。

– リー・ライアン

2011 年 2 月 26 日 16:34

33

@Lie Ryan: そうですね、でもクレタスが答えで言いたいのは、前の要素を選択しないということです。

– ボルトクロック

2011 年 3 月 29 日 21:05

57

これは、これで何ができるのか、何ができないのかを確認するために私が作成した例です。 jsfiddle.net/NuHy/1

– そろばん

2013 年 7 月 17 日 18:26

11

これに役立つ jquery 関数は prev() です。例: $("#the_element").prev().css("background-color", "red")

– サトビル・キラ

2015 年 5 月 18 日21:11に

単純なバニラ JS を使用して、前のものを選択するにはさまざまな方法があります

– 神話

2022 年 10 月 28 日 12:07

------------------------

セレクター レベル 4 は、次のものを使用して前の兄弟を選択できるようにする :has() を提案します。

previous:has(+ next) {}

または (隣接する兄弟ではなく、一般的な前の兄弟の場合):

previous:has(~ next) {}

優れたブラウザサポートを備えています。

1

10

FIrefox での has() のステータスを追跡するには、Bugzilla でこの問題をフォローしてください: bugzilla.mozilla.org/show_bug.cgi?id=418039

– ワルヤマ

2022 年 12 月 16 日 14:29

------------------------

必要に応じて、以前のすべての兄弟 (~ の反対) をスタイル設定する方法を見つけました。

リンクのリストがあり、その 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>

9

25

その仕組みの説明を追加できます。 (すべての項目と次の項目にスタイルを適用するようですが、明示的に記述することもできます)

– A.L

2015 年 4 月 24 日 17:04

17

はい、ただし、ほとんどの場合、前に 1 つだけ必要です。以前のものすべてではありません!

– アゼラファティ

2016 年 5 月 1 日 15:15

73

私の場合、リンク間のスペースにカーソルを置くと、リンクがすべて赤くなります。

– リン

2016 年 8 月 1 日 8:19

親タグの上にマウスを置くと、すべてのタグが赤くなりますが、.parent:hover a スタイルにより、子タグの上にマウスを置くことはできません。

– ジョー・ヴァン・ルーウェン

2021 年 11 月 10 日 17:35

@Lynn @JoeVanLeeuwen はい、この例には、前の兄弟をターゲットにする最小限のルールのみが含まれています。スペースを削除するには、さらにルールを追加する必要があり、おそらく候補の表示が変更されます。

– マンティッシュ

2021 年 11 月 12 日 10:30

------------------------

フレックス レイアウトとグリッド レイアウトの順序プロパティを考慮してください。

以下の例ではフレックスボックスに焦点を当てます。、ただし、同じ概念がグリッドにも適用されます。

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

特に、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; }

フレックス順序プロパティを使用して、ビジュアル表示上の兄弟の順序を復元します。

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> を受け取ります。値。フレックス項目の順序グループ​​を指定します。 に属します。

すべてのフレックス項目の初期注文値は 0 です。

CSS グリッド レイアウト仕様の順序も参照してください。

フレックス オーダー プロパティを使用して作成された「前の兄弟セレクター」の例。

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

jsフィドル 余談 – CSS に関する 2 つの時代遅れの信念

Flexbox は粉々ですCSS に関する長年の信念はNGです。

そのような信念の 1 つは、CSS では以前の兄弟セレクターは不可能であるというものです。

この信念が広く普及していると言っても過言ではありません。以下は、Stack Overflow に関連する質問のサンプルです。

セレクターを使用して CSS 内の要素の前の兄弟を選択する CSS: 前の兄弟を選択 CSS 前の兄弟を選択 CSS の前の隣接セレクター カーソルを合わせて前の兄弟を選択する 前の兄弟を取得する CSS セレクター CSSを使用してホバー時に兄弟要素の色を変更する Selenium CSS 構文を使用して前の兄弟を選択する方法 別の要素の前にある要素を選択するための CSS セレクター? CSS のみを使用してアクティブな入力の前の兄弟にスタイルを追加する方法 次の要素と前の要素の CSS セレクター どのように影響を与えるかdiv をホバーしたときのその他の要素

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

z インデックスの神話

もう 1 つの長年の信念は、z-index は位置決めされた要素に対してのみ機能するというものです。

実際、仕様の最新バージョンは – W3C 編集者草案 –それでもこれが真実であると主張します:

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

z インデックス

値: 自動 | |継承する 初期値：自動 適用対象: 配置された要素 継承: いいえ パーセンテージ: N/A メディア: ビジュアル 計算値: 指定どおり

(強調を追加)

しかし、実際には、この情報は古くなり、不正確です。

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

4.3.フレックスアイテムの Z オーダー

フレックス項目は、生の順序の代わりに順序変更されたドキュメント順序が使用されることを除いて、インライン ブロックとまったく同じように描画されます。 ドキュメントの順序、および auto 以外の z-index 値は、位置が静的であってもスタッキング コンテキストを作成します。

5.4. Z 軸の順序: z-index プロパティ

グリッド項目の描画順序は、順序が変更されたドキュメントの順序を除き、インライン ブロックとまったく同じです。 生のドキュメントの順序の代わりに使用され、auto 以外の z-index 値は、たとえ 位置は固定です。

これは、位置決めされていないフレックス項目で動作する z-index のデモンストレーションです: https://jsfiddle.net/m0wddwxs/

21

34

順序プロパティは、視覚的な順序を変更することのみを目的としているため、解決策ではありません。したがって、この回避策を機能させるために HTML で変更する必要がある元の意味的な順序は復元されません。

– マラット タナリン

2016 年 3 月 20 日 21:47

5

引用している CSS2.2 ED は本質的には CSS2 のままであることに留意してください。また、フレックスボックスとグリッド レイアウトは CSS2 には存在しないため、CSS2 に関する限り、その情報は確かに当てはまります。少なくとも、他のプロパティが不透明度などのスタッキング コンテキストを確立する可能性があると述べているのと同じように、CSS の将来のレベルで z-index が他のタイプの要素に適用される可能性があることを記載するようにテキストを更新することができます。

– ボルトクロック

2016 年 3 月 21 日 5:05

3

@BoltClock 私のコメントはブラウザのサポートとは何の関係もありません。この手法は、プレゼンテーションを優先してセマンティクスを破壊します。私は、サーバー側で以前の兄弟要素に単純な通常クラスを追加する方がはるかに合理的だと考えています。

– マラット タナリン

2016 年 3 月 21 日 9:34

3

「うーん、位置が指定されていない!」という場合でも、z-index がいつ機能するかを理解するのに苦労している人のために説明すると、仕様ではコンテキストのスタックの概念について言及しており、これでうまく説明されています。あーるMDN のティック

– ロジャー・スパイカー

2016 年 4 月 28 日 17:45

3

@Michael_B どういたしまして！私はこれに気づかずに多くのフロントエンダーに対処してきました。もう 1 つ言及しておきたいのは、擬似以前の兄弟セレクターは float: right (または、順序を逆にするその他の手段。flex/order には副作用がほとんど (最小限?) あります) でもうまく機能します。 。 2 つのフィドルを作成: フロートのデモンストレーション: 正しいアプローチ、および方向のデモンストレーション: rtl

– ロジャー・スパイカー

2016 年 4 月 28 日 17:57

------------------------

私も同じ質問をしましたが、「当然のこと」と思った瞬間がありました。書く代わりに

x ~ y

書く

y ~ x

明らかに、これは「y」ではなく「x」と一致しますが、「一致するか?」という質問には答えます。単純な DOM トラバーサルの方が、JavaScript でループするよりも効率的に適切な要素に到達できる可能性があります。

元の質問が CSS の質問であることは承知しているため、この回答はおそらく完全に無関係ですが、他の JavaScript ユーザーは私と同じように検索でこの質問に遭遇する可能性があります。

10

22

y が簡単に見つかる場合にはうまくいくと思います。問題は、y が x に対して相対的にしか見つからず、逆にすると、最初に x を見つけなければならないため、y を見つけることができない場合です。これはもちろん、y が次の兄弟ではなく前の兄弟であるという問題に関連していますが、y が後の兄弟である場合にも当てはまります。

– デビッド

2013 年 2 月 12 日 19:14

19

ちょっと厳しい言い方ですね、ハーシュ。 （ごめんなさい、我慢できませんでした。） 重要なのは、時には「あなたは存在するのか？」を知りたいだけだということです。また、「:before」を使用できる場合もあります。 2 つの要素の間に何かを置くこと。最後に、jQuery を使用する必要がある場合は、find("y ~ x").prev() を使用する方が他の多くの方法よりも簡単です。

– ブライアン・ラーセン

2013 年 3 月 13 日 9:04

186

前の兄弟セレクターの考え方は、前の要素を選択するということです。 U残念ながら、ここで説明するように逆にすると、この機能は提供されません。

– ゼネクサー

2013 年 7 月 31 日 0:56

17

この回答は元の質問に対する実際の解決策を提供していないことを明確にしてくれた @Zenexer に感謝します。y ~ x で問題を解決する方法を考えるのは自分が愚かだと感じ始めていました。

– ハイメ・ハブルッツェル

2014 年 4 月 23 日 21:20

6

この回答の背後にある考え方は理解できますが、回答に示されている推論はまったく意味がありません。セレクター y ~ x は、「一致するものはありますか?」という質問には答えません。ここで指定されている 2 つのセレクターはまったく異なるものを意味するためです。サブツリー <root><x/><y/></root> が指定されている場合、y ~ x が一致を生成する可能性はありません。例えば。 「y は存在しますか?」という質問がある場合、この場合、セレクターは単に y になります。 「任意の位置に兄弟 x がある場合、y は存在しますか?」という質問がある場合、その場合は両方のセレクターが必要になります。 (ただし、この時点では単に細かいことを言っているだけかもしれません...)

– ボルトCロック

2015 年 10 月 27 日 9:23

------------------------

「前のセレクター」はありませんが、:not と ~ (「セレクターの後」) の組み合わせを使用できます。逆の順序や JavaScript は使用できません。

.parent a{
  color: blue
}

.parent a.active{
  color: red
}

.parent a:not(.parent a.active ~ a){
  color: red
}

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

私のアプローチは、「div 以降のスタイルを削除するよりも、すべての div をスタイルする」ことや、JavaScript を使用すること、または逆の順序を使用することよりも簡単だと思います。

4

8

読者への余談: これは前の兄弟セレクターではなく、「一般的な前の兄弟」であることに注意してください。セレクターは、前の要素だけでなく、一致する要素と一致するという点で異なります (ただし、ソリューションが損なわれるわけではありません。これは非常に独創的です)。

– オレグ・バルターはウクライナに所属

2021 年 8 月 6 日 2:30

2

私は .parent a:not(.parent a.active ~ a, a.active, .parent :first-child) { color: red } t を使用しましたo 2 番目の子のみに色を付けます。

– CubicInfinity

2021 年 8 月 26 日 18:29

この回答は、mantish による 2015 年の回答を複雑に実行する方法に似ています

– 黄教

2022 年 8 月 18 日 16:00

表示される div がチェックされた入力の前にある CSS タブで機能します。誰かがこのような独創的な解決策を見つけることができるとは信じていませんでしたタグの逆順: div-input を通常の順序として、input-div はコーディングが簡単です。しかし、前の兄弟セレクターに関する答えは依然として「いいえ」のままです。

– センチュリアン

2023 年 4 月 8 日 14:11

------------------------

3 つのトリック: 基本的に、HTML 内の要素の HTML 順序を逆にします。 ~ 次の兄弟演算子を使用します:

1. CSS Flex と行反転の使用

.reverse {
  display: inline-flex;
  flex-direction: row-reverse;
}
.reverse span:hover ~ span { /* On SPAN hover target its "previous" elements */
  background:gold;
}

Hover a SPAN and see the previous elements being styled!<br>

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

2. 方向を指定した Flex の使用: RTL

.reverse {
  display: inline-flex;
  direction: rtl;
}
.reverse span:hover ~ span { /* On SPAN hover target its "previous" elements */
  background: red;
}

Hover a SPAN and see the previous elements being styled!<br>

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

3. float right の使用

.reverse { 
  display: inline-block;
}
.reverse span{
  float: right; 
}
.reverse span:hover ~ span { /* On SPAN hover target its "previous" elements */
  background: red;
}

Hover a SPAN and see the previous elements being styled!<br>

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

------------------------

+ は次の兄弟を表します。以前のものに相当するものはありますか 兄弟？

2 つの軸セレクターを使用できます。そして ？

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

+ は直後の兄弟セレクターです ~ は後続の兄弟セレクターです

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

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

?直前の兄弟セレクター (+ の反対) ！前の兄弟セレクター (~ の反対)

実際の例:

以下の例では:

.any-subsequent:hover ~ div は後続の div を選択します 。すぐに-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>

2017 年 4 月 25 日 9:59 に回答

浪人

浪人

27.8k

10 個

金バッジ 10 個

88 個

銀バッジ 88 個

銅バッジ 114 個

銅バッジ 114 個バッジ

4

5

これにより、Rails プロジェクト内の sass に実装しようとすると構文エラーが発生します。

– アレックス

2017 年 9 月 5 日 22:57

36

axe は CSS ポストプロセッサです。 Sass、Less、Stylus などの CSS プリプロセッサと同じ構文は使用しません。

– ロウニン

2017 年 9 月 6 日 15:11

2

@Rounin ドキュメントへのリンクを追加していただけますか? ax ポストプロセッサが見つかりません。

– ディオニス

2020 年 5 月 27 日 0:35

1

@Dionys - ご興味をお持ちいただきありがとうございます。 ax は 2016 年末に私が始めたプロジェクトです。当時私は ES2015 を知らず、JS のオブジェクトさえも私にとって非常に新しいものでした。 GitHub リポジトリは、 github.com/RouninMedia/axe にあります。いつかこの話に戻りたいと思っています (I' JavaScript イベントに相当する CSS である axe-blades と呼ばれるものも開発しました)、しかし、最初に別のプロジェクト (コード名 ashiva) での作業を完了する必要があります。

– ロウニン

2020 年 5 月 27 日 1:02

------------------------

別のフレックスボックス ソリューション

HTML 内の要素の順序を逆に使用できます。次に、Michael_B の回答のように order を使用する以外に、flex-direction: row-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>

制限事項 次の要素のクラスに基づいて前の要素を選択することはできません これは擬似クラスでも同様です 答えた

2014 年 9 月 3 日 16:16

0x1 遺伝子

0x1 遺伝子

3,379

4

金バッジ 4 個

30 個

銀バッジ 30 個

49 個

銅バッジ 49 個

6

なぜ同じノードでなければならないのですか? :nth-child(-n+4) を使用しないのはなぜですか?

– イアン

2014 年 10 月 27 日 20:13

1

@Ian :nth-child(-n+4) は、適切に動作するためにセレクターに適用する必要がある疑似クラスであるためです。納得できない場合は、私のフィドルのフォークを使って実験してみてください。うまくいかないことがわかるでしょう。

– 0x1遺伝子

2014 年 10 月 28 日 0:11

1

実際には、 * セレクターを使用してノードタイプを独立させることができますが、それは不快なほど悪い習慣です。

– ジョシュ・バージェス

2015 年 1 月 13 日 19:07

1

実際には、これはさまざまなノード (jsfiddle.net/aLhv9r1w/316) で動作します。答えを更新してください:)

– ジェイミー・バーカー

2015 年 6 月 1 日 10:44

2

複雑なセレクターがありましたが、それが li#someListItem であり、その直前にノードが必要だったとします (これが「previous」の解釈方法です) - 必要ありません' 39;あなたが提供した情報がどのように扱われるかわかりませんed は、CSS を通じてそれを表現するのに役立ちます。最初の n 個の兄弟を選択しているだけで、n はわかっていると仮定します。このロジックに基づいて、任意のセレクターが機能し、必要な要素 ( :not() など) を選択する可能性があります。

– ビトゥーリアン

2019 年 7 月 11 日 15:53

------------------------

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

2

2

item:has(~ item:hover) を使用して、現在ホバーされている要素の前にあるすべての兄弟を変更することもできます。

– lsblsb

2023 年 8 月 21 日 6:51

これは新しく受け入れられた答えになるはずです。

– バーチャルウルフ

2023 年 12 月 20 日 3:59

------------------------

二重否定を使用できます

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

SELECTOR を TAG または .CLASS に置き換えます (#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) {}

/* Solution */
div.parent:hover > div.child:not(:hover):not(:hover ~ .child)  {
    background-color:red;
    border-radius:1.5em;
}
div.parent:hover > div.child:not(:hover):not(:hover ~ .child) > div {
    background-color:yellow;
}

/* Make pretty (kinda) */
div.parent {
  width:9em;
  height:9em;
  /* Layout */
  display:grid;
  grid-template-columns : auto auto auto;
  grid-template-rows : auto auto auto;
}
div.child {
  /* Dimensions */
  height:3em;
  width:3em;
  /* Layout */
  position:relative;
  /* Cursor */
  cursor: pointer;
  /* Presentation */
  border: 1px black solid;
  border-radius:1.5em;
}
.star {
  /* Dimensions */
  width: 2.5em;
  height: 2.5em;
  /* Placement */
  position:absolute;
  top: 50%;
  left: 50%;
  transform:translate(-50%,-50%);
  /* Geometry */
  -webkit-clip-path: polygon(
    50% 0%,
    63% 38%,
    100% 38%,
    69% 59%,
    82% 100%,
    50% 75%,
    18% 100%,
    31% 59%,
    0% 38%,
    37% 38%
  );
  clip-path: polygon(
    50% 0%,
    63% 38%,
    100% 38%,
    69% 59%,
    82% 100%,
    50% 75%,
    18% 100%,
    31% 59%,
    0% 38%,
    37% 38%
  );
  /* Presentation */
  background-color: lightgrey;
}
div.child:hover {
    /* Presentation */
    background-color:yellow;
    border-radius:1.5em;
}
div.child:hover > div.star {
    /* Presentation */
    background-color:red;
}

<div class="parent">
  <div class="child" href=""><div class="star"></div></div>
  <div class="child" href=""><div class="star"></div></div>
  <div class="child" href=""><div class="star"></div></div>
  <div class="child" href=""><div class="star"></div></div>
  <div class="child" href=""><div class="star"></div></div>
  <div class="child" href=""><div class="star"></div></div>
  <div class="child" href=""><div class="star"></div></div>
  <div class="child" href=""><div class="star"></div></div>
  <div class="child" href=""><div class="star"></div></div>
 </div>

0

------------------------

オーバーライドホバーすると前の兄弟のみにスタイルが追加されているように見えるように、ホバーすると次の兄弟のスタイルが追加されます。

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>

------------------------

私の要件は、@Quentin の回答「前の兄弟を選択しました」の助けを借りて、現在ホバーされている項目の前と次の 2 つの兄弟を選択することでした。

.child{
  width: 25px;
  height: 25px;
}

.child:hover {
    background:blue;
}

 .child:has( + .child:hover) {
  background: yellow;
}

.child:has(+ .child + .child:hover){
  background:green;
}

.child:hover + .child {
  background: red;
}

.child:hover + .child + .child {
  background: magenta;
}

<ul class="parent">
  <li class="child"></li>
  <li class="child"></li>
  <li class="child"></li>
  <li class="child"></li>
  <li class="child"></li>
  <li class="child"></li>
</ul>

以前の兄弟をすべて選択するには

.child {
    width: 25px;
    height: 25px;
}

.child:hover {
    background: blue;
}

.child:has(~ .child:hover) {
    background: red;
}

<ul class="parent">
  <li class="child"></li>
  <li class="child"></li>
  <li class="child"></li>
  <li class="child"></li>
  <li class="child"></li>
  <li class="child"></li>
</ul>

1

これは実際には、すべてではなく、1 つ前の兄弟のみを選択するように機能します。

– デビッド

2022 年 10 月 3 日 9:35

------------------------

正確な位置がわかっている場合は、後続のすべての兄弟を :nth-child() ベースで除外することが機能します。

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

これは、3 番目より前のすべてのリスト (例: 1 番目と 2 番目) を選択します。しかし、私の意見では、これは見苦しく、使用用途が非常に限られています。

n 番目の子を右から左に選択することもできます。

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

これも同じです。

------------------------

いいえ。 CSS経由では無理です。それは「カスケード」を心に留めています ;-)。

ただし、ページに JavaScript を追加できる場合は、jQuery を少し使用するだけで最終目標を達成できる可能性があります。 jQuery の find を使用して、ターゲットの要素/クラス/id に対して「先読み」を実行し、バックトラックしてターゲットを選択できます。 次に、jQuery を使用して要素の DOM (CSS) を書き直します。

Mike Brant によるこの回答に基づいて、 次の jQuery スニペットが役立ちます。

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

これはまず、<p> の直後に続くすべての <ul> を選択します。 次に、そのセットから以前のすべての <p> を選択するために「バックトラック」します。

の。

事実上、「前の兄弟」は jQuery を介して選択されています。 ここで、.css 関数を使用して、その要素の CSS の新しい値を渡します。

私の場合、ID #full-width を持つ DIV を選択する方法を探していましたが、それは .companies クラスを持つ (間接的な) 子孫 DIV がある場合に限ります。

私は .companies の下にあるすべての HTML を制御できましたが、その上の HTML は変更できませんでした。 そして、カスケードは 1 方向のみ、つまり下に進みます。

こうして、すべての #全角 を選択できました。 または、#全角のみが続く .companies を選択することもできます。 ただし、.companies に続く #full-width だけを選択することはできませんでした。

また、HTML の上位に .companies を追加することはできませんでした。 HTML のその部分は外部で記述され、コードをラップしていました。

しかし、jQuery を使用すると、必要な #full-width を選択して、適切なスタイルを割り当てることができます。

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

これは、CSS の標準で特定の要素をターゲットにするためにセレクターを使用する方法と同様に、すべての #full-width .companies を検索し、それらの .companies だけを選択します。 次に、.parents を使用して「バックトラック」し、.companies のすべての親を選択します。 ただし、これらの結果をフィルターして #fill-width 要素のみを保持するため、最終的には #full-width 要素は、.companies クラスの子孫がある場合にのみ選択されます。 最後に、結果の要素に新しい CSS (幅) 値を割り当てます。

$(".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 o でフィルター処理された、一致した要素の現在のセット内の各要素の子孫を取得します。オブジェクト、または要素。 .parents: 一致した要素のセット内の各要素の直前の兄弟を取得します。セレクターが提供されている場合は、そのセレクターと一致する場合にのみ前の兄弟を取得します (リストされた要素/セレクターのみを含むように結果をフィルターします)。 .css: 一致した要素のセットに対して 1 つ以上の CSS プロパティを設定します。

5

これは質問とは関係ありません。もちろん、JS を使用することも可能であり、これには jQuery も必要ありません (以前のElementSibling)。

– ファビアン・フォン・エラーツ

2019 年 7 月 10 日 17:43

1

@FabianvonEllerts 私は回答の最初の行で OP の質問に直接答えました。私の答えが述べているように、CSS経由では文字通り不可能です。次に、CSS のユーザーが使い慣れていてアクセスできるテクノロジ (JS | JQuery) を使用して、目標を達成するための 1 つの可能な道を示しました。たとえば、多くの WordPress サイトには JQuery も含まれているため、使いやすく、覚えやすく、拡張しやすいため、簡単なエントリ ポイントとなります。代替手段を提示せずに、単に「いいえ」と答えるのは無責任です。目標を立ててください。同じ質問があったときに学んだことや活用したことを共有しました。

– シェリル・ホーマン

2019 年 7 月 10 日 19:48

ネイティブ JS DOM 関数に詳しい人向けの previousElementSibling() は、別の非 CSS パスを提供します。

– シェリル・ホーマン

2019 年 7 月 10 日 19:56

他の CSS HACK は非常に興味深いと思いましたが、特に私の場合はユースケースでは、それらは機能しなかったか（警告のカテゴリに分類された）、または複雑すぎました。同じ状況に陥った他の人のために、上記の解決策が失敗する場合、または実装/保守が難しすぎる場合に機能する、この使いやすい方法を共有するのは公正です。多くの CSS HACK が共有されました。この回避策はカバーされていませんでした。どの回答も、OP が特に要求した + (存在しない) セレクターを使用していません。この回答は JS の「ハック」であると考えてください。これは、私が解決策を見つけるために費やした他の人の時間を節約するためにここにあります。

– シェリル・ホーマン

2019 年 7 月 10 日 20:16

1

"「カスケード」が必要です。心の底から;-)。」よく言ったものだ。おそらくそこで止まっていたかもしれません。 ;^D

– ラフィン

2020 年 6 月 18 日 22:01



------------------------



/* Add a style to all the children, then undo the style to the target 
and sibling children of your target. */

ul>li {
  color: red;
}

ul>li.target,
ul>li.target~li {
  color: inherit;
}

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

2020 年 12 月 2 日 22:38 に回答

R-D

R-D

566

6 個

銀バッジ 6 個

13 個

銅バッジ 13 個

1

stackoverflow.com/a/48952456/1347604 もある程度同じアプローチだと思いますが、これは他の要素に継承を使用しているため、質問の文字通りの同等性を求める質問に焦点を当てておくのに役立ちます。

– ジャスミン ヘグマン

2020 年 12 月 11 日 14:21



------------------------



最も簡単な解決策を見つけました。これは、あなたが行っていることに基づいてのみ適用される可能性があります。

「sibling_2」にカーソルを合わせたいとします。引用; 「sibling_1」を変更するには以下の例では:

<div class='parent'>
  <div class='sibling_1'></div>
  <div class='sibling_2'></div>
</div>

以前の要素セレクターがないため、「sibling_1」と「sibling_2」を切り替えて適用するだけで、見た目が同じになります。

.parent {
  display: flex;
  flex-direction: row-reverse;
}

これで、そのように選択できるようになりました。

.sibling_1:hover ~ .sibling_2 {
  #your CSS
}

0



------------------------



:has() は次のように使用できます。

.thePrevious:has(+ .theNextSibling)

次のように、重複するブートストラップ モーダルを修正するためにこれを使用しました。複数のモーダルがある場合、以前のモーダルは非表示になります。

.modal.show.modal--open:has(~ .modal.show.modal--open){
   opacity: 0;
 }



------------------------



残念ながら、「前の」兄弟セレクターはありませんが、位置決め (右フロートなど) を使用することで同じ効果が得られる可能性があります。それは、何をしようとしているかによって異なります。

私の場合、主に CSS による 5 つ星の評価システムが必要でした。前の星に色を付ける（またはアイコンを交換する）必要があります。各要素を右にフローティングすることで、基本的には同じ効果が得られます (したがって、星の HTML は「逆向きに」書かれなければなりません)。

この例では FontAwesome を使用し、fa-star-o と fa-star の Unicode を交換しています。 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/

1

1

float right と + または ~ セレクターが最もクリーンな回避策だと思います。

– ウィリアム・ジャッド

2017 年 11 月 1 日 21:12



------------------------



正確な目的に応じて、痛みを引き起こす方法があります。親セレクターを使用せずに、親セレクターの有用性を確認します (たとえ親セレクターが存在していたとしても)...

次のようにします。

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

これにより、すべてのアンカー リンクの上部に 15 ピクセルのマージンが設定され、LI 内に UL 要素 (またはその他のタグ) がないアンカー リンクのマージンが 0 にリセットされます。

2014 年 2 月 7 日 16:13 に回答

ダイナミックダン

ダイナミックダン

423

4

銀バッジ 4 個

12

銅バッジ 12 個

1

これでは質問の答えになりません。

– ベンジャミン・カールソン

2023 年 10 月 25 日 20:27



------------------------



存在しません、そして存在します。

入力の前にラベルを配置する必要がある場合は、入力の後にラベルを配置し、ラベルとラベルの両方を保持します。 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 のスタイルが上で定義したように変更されます。

0



------------------------



前の兄弟 tr を選択するためのソリューションが必要でした。私は React と Styled コンポーネントを使用してこのソリューションを思いつきました。これは私の正確な解決策ではありません（数時間後の記憶によるものです）。 setHighlighterRow 関数に欠陥があることはわかっています。

OnMouseOver 行は行インデックスを state に設定し、前の行を新しい背景色で再レンダリングします。

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;
    }
`;



------------------------



そのようなセレクターはありませんが、DOM API にはかなり読み取り専用のプロパティがあります。はい

Node.previousSibling

2021 年 3 月 25 日 17:28 に回答

ダンジャーソン

ダンジャーソン

91

1

銀バッジ 1 個

8

銅バッジ 8 個



------------------------



要素をフレックスボックスに配置し、flex-direction: column-reverse を使用することで、この問題を解決しました。

その後、HTML 内の要素を手動で反転する (逆の順序で配置する) 必要がありましたが、見た目は正常でしたが、よかった！

<div style="display: flex; flex-direction: column-reverse">
  <a class="element2">Element 2</a>
  <a class="element1">Element 1</a>
</div>
...
<style>
  .element2:hover + element1 {
    ...
  }
</style>

2021 年 9 月 23 日 12:08 に回答

トリパシュ

トリパシュ

117

9

銅バッジ 9 個



------------------------



私も同様の問題を抱えていましたが、この種の問題はすべて次のように解決できることがわかりました。

すべてのアイテムにスタイルを与えます。 選択したアイテムにスタイルを与えます。 + または ~ を使用して次の項目にスタイルを与えます。

このようにして、現在および以前のアイテム (以前のすべてのアイテム) をスタイル設定できるようになります。現在のアイテムと次のアイテム)、および次のアイテムがいっぱいです。

例:

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

誰かのお役に立てば幸いです。

3

2

基本的には、同じスレッドの古い回答と同じトリックです: stackoverflow.com/a/27993987/717732

– ケツァルコアトル

2019 年 9 月 16 日 14:42

1

しかし、これは他のものとは異なり、何をしているのかをわざわざ説明しています。

– ティピーム

2020 年 10 月 2 日 0:25

@Teepeemm、同意します。その答えを見たが、適切な説明がなかったので読み飛ばした。それは単に「私がやったことを見て、私を真似してください！」ということだけでした。

– ボボート

2022 年 6 月 3 日 21:28



------------------------



ここに同様の質問へのリンクがあります

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>



------------------------



私のユースケースでは、親要素に項目が 2 つだけある状態で、フォーカスとホバー時に前の要素のスタイルを変更する必要がありました。これを行うには、:focus-within および :hover 疑似クラスを使用します。

フォーカス/ホバー イベントが発生するたびに選択するのと同様

.root-element:hover .element-to-style { background-color: red;} 
.root-element:focus-within .element-to-style { background-color: green;} 

<div class="root-element">
<span class="element-to-style"> TextFocused</span>
<input type="text" placeholder="type To Style"/>

</div>

2

私にとってこの答えは機能しません!

– メフメット

2022 年 2 月 7 日 11:17

これは実際には以前の兄弟選択の状況ではありません。

– タイラーH

2023 年 3 月 28 日 15:42



------------------------



これが o を使用した私の実際の解決策ですゴールドスター用の CSS のみ (この場合は特に SCSS)

コンテナdiv内に最初は灰色の星が5つあります コンテナ div にカーソルを合わせると、すべての星が金色になります 特定の星の上にカーソルを置くと、すべての後継兄弟 div が灰色になります

以下は洗練されたコードです (ただし、HTML に簡単に変換できます)

<button id="review">
        <div id="star-container">
          <div><Fa icon="{faStar}" /></div>
          <div><Fa icon="{faStar}" /></div>
          <div><Fa icon="{faStar}" /></div>
          <div><Fa icon="{faStar}" /></div>
          <div><Fa icon="{faStar}" /></div>
        </div>
</button>

<style lang="scss">
  #review {
    color: $cool-gray;
    #star-container {
      display: flex;
      &:hover {
        color: $custom-gold;
      }
      div {
        &:hover ~ div {
          color: $cool-gray;
        }
      }
    }
  }
</style>