• HTMLCSS

CSSで直前・後方の兄弟要素を指定する方法

CSSで兄弟要素を指定。任意のプロパティを付与したい。

本記事ではこのような悩みを解決します。

指定した要素の後方の兄弟要素を全て指定する

<style>
  p~div {
    color: red;
  }
</style>
<p class="text">テキスト</p>
<!-- 以下divタグ内テキストをredに変更 -->
<div>テキスト</div>
<div>テキスト</div>
<div>テキスト</div>
<div>テキスト</div>

指定した要素の後方の兄弟要素を全て指定するコード例です。

チルダ（~）を使います。

使い方は以下の通りです。

  指定要素~後方の兄弟要素名 {
　兄弟要素に付与したいCSSプロパティ
}

セレクタで、指定要素の後にチルダ（~）を記述。

そのあとに兄弟要素のタグ・クラス名を記述します。

あとはブロック内で後方の兄弟要素に付与したいCSSプロパティを記述すればOKです。

直後の兄弟要素を指定する

<style>
p + div {
  color: red;
}
</style>
<div>テキスト</div>
<p class="text">テキスト</p>
<!-- 以下divタグ内テキストをredに変更 -->
<div>テキスト</div>

後方の兄弟要素全てではなく、直後の要素だけ指定する場合のコード例です。

プラス（＋）演算子を使います。

セレクタで、指定要素の後にプラス（＋）演算子を記述。

そのあとに兄弟要素のタグ・クラス名を記述します。

直前の兄弟要素を指定する

<style>
div:has(+ p) {
  color: red;
}
</style>
<!-- 以下divタグ内テキストをredに変更 -->
<div>テキスト</div>
<p class="text">テキスト</p>
<div>テキスト</div>

直前の兄弟要素を指定する場合のコード例です。

has疑似クラスとプラス（＋）演算子を使います。

使い方は以下の通りです。

兄弟要素名:has(+ 指定要素) {
適用したいプロパティ
}

上記のようにセレクタを記述する事で直前の兄弟要素を指定できます。

まとめ

CSSで直前・後方の兄弟要素を指定する方法について紹介しました。

以上で解説を終わります。