CSSのセレクタのチルダの意味と使い方を解説!

今回はCSSのセレクタのチルダの意味と使い方を解説します。CSSでは間接セレクタのチルドを使用する事によって簡潔にコードをまとめる事ができます。サンプルコード付きで解説いたしますので是非参考にして下さい。

コンテンツ [表示]

  1. 1CSSのセレクタのチルダの意味とは?
  2. 2CSSのセレクタのチルダの使い方
  3. 3まとめ

CSSのセレクタのチルダの意味とは?

CSSでHTMLの要素に指定する方法をCSSセレクタといい、チルダ(~)とは選択した要素以降を指定させるためのセレクタです。チルダ(~)を使用する事によって簡潔にCSSにまとめる事が出来るようになります。

HTMLに記述した指定の範囲または要素以降に対してCSSで装飾をすることを間接セレクタといいます。

MacでもWindowsでもshiftキーを押しながら右上の『^』の部分を押すと入力できるようになります。

CSSのセレクタのチルダの使い方

チルダの使い方

選択した要素 ~ 条件 {
  color: aqua;
}

CSSのセレクタのチルダの使い方は、CSSで選択した要素 ~ 条件を記述すると適用されるようになります。

下記のサンプルコードのようにh2 ~ pを選択する事でh2要素より前の要素には適用されずにh2要素の全てのp要素にCSSを適用させる事が出来ます。

h2 ~ p,h3 {
  color: aqua;
}

またh3要素にも条件を付け足したい場合には上のコードのように記載するとh3要素にもCSSが適用されるようになります。

まとめ

いかがでしたでしょうか。今回はCSSのセレクタのチルダの意味と使い方を解説してきました。

間接セレクタ(~)を使用することによって簡潔にCSSを記述する事ができ、選択した要素以降の条件全てを適用させ指定させるためのセレクタという事がわかりました。

ぜひ参考にしてみて下さい。

GeekHive採用サイト

関連記事