兄弟要素がPURE CSSに存在する場合、条件付きでスタイルを設定します。

Question

次の要素が表示される場合と表示されない場合があります。

<div class="wrapper"> 
    <div class="firstElement"></div> 
    <div class="secondElement"></div> 
</div> 

私は条件付きで.secondElementが存在する場合にのみ.firstElementにスタイルを設定します。

PURE CSSでこれを行う方法はありますか？兄弟セレクタ/親セレクタのどちらか？

ありがとうございます！

Answer 1

一般的に、 CSSはDOMの前後を読み取ります。逆方向/上方向には読み取られません。しかし、このマークアップで、あなたは:not(:last-child)

.firstElement:not(:last-child) { 
 
    color: red 
 
}

<div class="wrapper"> 
 
    <div class="firstElement">target this</div> 
 
    <div class="secondElement"></div> 
 
</div> 
 

 
<div class="wrapper"> 
 
    <div class="firstElement">not this</div> 
 
</div>