
4.隣接セレクタ、間接セレクタ、直下セレクタ ー フロントエンドエンジニアのための「Sass」講座
CSSには子孫セレクタ以外にも、隣接セレクタ、間接セレクタ、直下セレクタといった指定方法があります。
これらもSassでネストを使って書くことができます。
それでは、子孫セレクタ以外のセレクタをネストして書くにはどうしたらいいのでしょうか?
CSSの文法の確認になりますが、まず、CSSから書いてみましょう。
隣接セレクタ
隣接セレクタは、ある要素の次に出てくる隣の要素に対してスタイルを指定します。
要素同士を結合子「+」で繋げることで記述します。
例えば、li要素のすぐ隣のli要素はこのように書けます。
1 2 3 |
ul li + li { border-top: 1px solid #666666; } |
間接セレクタ
次に間接セレクタです。
隣接セレクタはすぐ隣だけでしたが、間接セレクタは、後ろに続く同階層の全ての要素にスタイルを適用します。
要素同士を結合子「~」で繋げることで記述します。
例えば、li要素が複数並んでいた時、2個目以降のli要素全てに適用するには、このように書きます。
1 2 3 |
ul li ~ li { color: #FF0000; } |
直下セレクタ
最後に、直下セレクタです。
直下セレクタは、ある要素のすぐ直下にある要素だけにスタイルを適用します。
要素同士を結合子「>」で繋げることで記述します。
例えば、li要素のすぐ直下にあるdiv要素にスタイルを適用するには、このように書きます。
1 2 3 |
ul li > li { background: #CCCCCC; } |
それでは、これをSassのネストを使って書くとどうなるでしょうか?
Sassで隣接セレクタ、間接セレクタ、直下セレクタを書く
Sassのネストを使って書くと、隣接セレクタ、間接セレクタ、直下セレクタはそれぞれ下記のようになります。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
ul { li { + li { border-top: 1px solid #666666; } ~ li { color: #FF0000; } > li { background: #CCCCCC; } } } |
意外と簡単、というかそのまんま結合子を使って、子孫セレクタで書いた時と同じように書くだけですね。
これでコンパイルすると、きちんと結合子をつなげて出力されます。
【動画講座】 フロントエンドエンジニアのための「Sass」講座 ~基礎から実践まで~

HTML5とCSS3の基本的な知識があれば、Sassの知識はゼロからでも大丈夫!Udemyの動画講座なら、約5時間の動画でWeb開発の現場で使える技術を身につけることができます!
このブログから申し込むと定価1,2000円のところ、
90%OFFの1,200円で受講できるクーポンをプレゼント!