divの隣り合った要素を両方とも対象にすることは可能ですか？

Question

中間要素を使って両方の隣接要素を対象にすることが可能かどうかを知りたいですか？例えば

：

<div> 
    <span class="icon">icon</span> 
    <input id="input" class="input error" type="text" /> 
    <label for="input"></label> 
<div> 

入力は、私がラベルと色の赤を持っているスパンをターゲットにしたいエラークラスがあります。私はスパンとは運がなかったしましたが

input.error ~ label { 
    color: red; 
} 

：

は、私は次のと ラベル赤を作ることに成功しました。可能であれば誰か教えてもらえますか？もしそうなら、助けてください。

Answer 1

jquery .siblings()を使用してスパンをターゲットにし、クラスを追加しました。

Answer 2

orderプロパティを持つflexboxを使用すると、要素を視覚的に並べ替えることができますが、inputをDOMの最初の要素として使用することで、一般的な兄弟セレクタを使用できます。

div { 
 
    display: flex; 
 
} 
 
.icon { 
 
    order: -1; 
 
} 
 
input.error ~ * { 
 
    color: red; 
 
}

<div> 
 
    <input id="input" class="input error" type="text"> 
 
    <span class="icon">icon</span> 
 
    <label for="input">label</label> 
 
<div>

Answer 3

私は中央の1を使用して、両方の隣接 要素をターゲットとすることが可能であるかどうかを確認したいですか？両方の隣接要素を標的とする斧セレクタ%を使用することができ

。 .iconとlabelの間には共有クラスや要素タイプが存在しないので

、あなたが宣言する必要があります（この場合）または

input.error % .icon, 
input.error % label { 
color: red; 
} 

を、あなたはCSS直後の兄弟セレクタを組み合わせかもしれません+と斧即時前の兄弟セレクタ?：

input.error ? .icon, 
input.error + label { 
color: red; 
}