2021/2/18 HTML&CSS辞典をオープンしました! コンテンツは随時更新します!

[CSS] 間接セレクタで弟要素にスタイルを適用しよう!

間接セレクタの評価
頻出度
(5.0)
重要度
(5.0)
総合評価
(5.0)




1.間接セレクタとは?

間接セレクタは親要素が同じになる兄弟関係の弟に適用されるセレクタです。

このセレクタは、隣接セレクタとは異なり、兄弟関係であれば間に別の要素が入っても適用されます。




2.間接セレクタの使い方

それでは間接セレクタの使い方をみていきましょう。

間接セレクタは「要素 ~ 要素」という方法で指定します。

・・・

<ul>
 <li>HOME</li>
 <li>PRODUCT</li>
 <li id="list3">COMPANY</li>
 <li>CONTACT</li>
</ul>

・・・
#list3 ~ li {
 color: red;
}

上記では「CONTACT」という文字色が赤色になります。




コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です