CSSの前に要素を置く

Question

CSSで星評価を作成します。ユーザーが最後の星に移動すると、その星より前のすべての星は別の色を持っている必要があります。たとえば、minStar3を移動し、次にminStar1、minStar2、およびminStar3の色が異なる必要があります。

<i id="minStar1" class="fa fa-star fa-lg" aria-hidden="true"></i> 
<i id="minStar2" class="fa fa-star fa-lg" aria-hidden="true"></i> 
<i id="minStar3" class="fa fa-star fa-lg" aria-hidden="true"></i> 
<i id="minStar4" class="fa fa-star fa-lg" aria-hidden="true"></i> 
<i id="minStar5" class="fa fa-star fa-lg" aria-hidden="true"></i> 

Answer 1

あなたはFlexboxでこれを作成し、flex-direction: row-reverseを持つ要素の順序を変更することができます。 ~一般兄弟セレクタを使用して、ホバリングされた要素の後に来るすべての兄弟要素を選択することもできます。

.rating { 
 
    display: inline-flex; 
 
    flex-direction: row-reverse; 
 
} 
 
i { 
 
    width: 20px; 
 
    height: 20px; 
 
    margin: 5px; 
 
    border: 1px solid black; 
 
    transition: all 0.3s ease-in; 
 
} 
 
i:hover ~ i, 
 
i:hover { 
 
    background: black; 
 
}

<div class="rating"> 
 
    <i id="minStar1" class="fa fa-star fa-lg" aria-hidden="true"></i> 
 
    <i id="minStar2" class="fa fa-star fa-lg" aria-hidden="true"></i> 
 
    <i id="minStar3" class="fa fa-star fa-lg" aria-hidden="true"></i> 
 
    <i id="minStar4" class="fa fa-star fa-lg" aria-hidden="true"></i> 
 
    <i id="minStar5" class="fa fa-star fa-lg" aria-hidden="true"></i> 
 
</div>

Answer 2

は、私がここにSOの前に、このトリックを見てきましたが、戻ってそれを見つけることができません。

これを行うには、星の順番を逆転させます。
要素内にラップします（pまたはdivなど）
ラッパーdirection: rtlを指定します。

方向を反転することによって、兄弟セレクタ~を使用できます。

i { 
 
    display: inline-block; 
 
    width: 50px; 
 
    height: 50px; 
 
    background: green; 
 
} 
 

 
p { 
 
    text-align: left; 
 
    direction: rtl; 
 
} 
 
p>i:hover, 
 
p>i:hover~i { 
 
    background: red; 
 
}

<p> 
 
    <i id="minStar5" class="fa fa-star fa-lg" aria-hidden="true">5</i> 
 
    <i id="minStar4" class="fa fa-star fa-lg" aria-hidden="true">4</i> 
 
    <i id="minStar3" class="fa fa-star fa-lg" aria-hidden="true">3</i> 
 
    <i id="minStar2" class="fa fa-star fa-lg" aria-hidden="true">2</i> 
 
    <i id="minStar1" class="fa fa-star fa-lg" aria-hidden="true">1</i> 
 
</p>