変更テキストカラー

Question

これは私のHTMLコードです：

<label> 
    <p>text description</p> 
    <input type="text"> 
</label> 

<input>上の焦点は、私が<p>タグ内text-colorを変更したいとき。

どのようにCSSコードを記述しますか？

Answer 1

これは:focus-within擬似クラスセレクタを使用して可能です。

：focus-within CSS擬似クラスは、：focus擬似クラスが一致する要素または：：focus擬似クラスが一致する子孫を持つ要素と一致します。あなたは、pタグの色が変更されていません（これは影の木で子孫が含まれています。）

:focus-within @ MDN

Support Details

lable { 
 
    margin: 1em; 
 
    border: 1px solid grey; 
 
} 
 

 
label:focus-within p { 
 
    color: red; 
 
}

<label> 
 
    <p>text description</p> 
 
    <input type="text"> 
 
</label>

Answer 2

<input>から前の兄弟要素（<p>）にアクセスすることはできません。

は、しかし、あなたは以下のソリューションを使用することができます。

label { 
 
    display:flex; 
 
} 
 
p { 
 
    order:-1; 
 
} 
 
input:focus ~ p { 
 
    color:red; 
 
}

<label> 
 
    <input type="text"> 
 
    <p>text description</p> 
 
</label>