ネストにおけるコンビネーター
この記事ではネストにおけるコンビネーターについて説明します。
SASSでのネストにおけるコンビネーターの使用方法を解説し、ステップバイステップで理解を深めるサンプルコードを示します。
YouTube Video
ネストにおけるコンビネーター
SASSでは、CSSセレクターを親子関係に基づいて簡潔に記述できますが、子孫セレクターや隣接セレクターなどのコンビネーターを正しく扱うためには特定の注意が必要です。
ネストの基本
SASSでは、親セレクターの中に子セレクターを入れ込むことで、CSSの親子構造を明確かつ簡潔に表現できます。
例：基本的なネスト
1.nav {
2 ul {
3 li {
4 color: blue;
5 }
6 }
7}コンパイル後のCSS
1.nav ul li {
2 color: blue;
3}親セレクター参照（&）
SASSの&は、現在の親セレクターを参照するために使用されます。
コンビネーターと&の組み合わせ
&を活用することで、柔軟なセレクターを構築できます。
サンプル
1.card {
2 & > .title {
3 font-weight: bold;
4 }
5 & + .card {
6 margin-top: 20px;
7 }
8}コンパイル後のCSS
1.card > .title {
2 font-weight: bold;
3}
4.card + .card {
5 margin-top: 20px;
6}&の省略記法
SASSでは、セレクターの先頭にコンビネーターが置かれる場合、暗黙的に親セレクターが補完されるため、&を省略することができます。
省略可能なケース
例えば、+ .itemと書いた場合、SASSは内部的に& + .itemと解釈し、親セレクターとの組み合わせを自動的に生成します。
サンプル
1.item {
2 + .item {
3 margin-top: 10px;
4 }
5 &--hover {
6 background-color: red;
7 }
8}コンパイル後のCSS
1.item + .item {
2 margin-top: 10px;
3}
4.item--hover {
5 background-color: red;
6}コンビネーターの概要
CSSのコンビネーターは、セレクター間の関係を定義します。以下は主なコンビネーターの種類です。
-
子孫セレクター（スペース） 子孫セレクターは、親要素の中に含まれるすべての子孫要素を対象にします。 例:
.parent .child -
子セレクター（
>） 子セレクターは、直下の子要素だけを対象にします。 例:.parent > .child -
隣接セレクター（
+） 隣接セレクターは、直後に続く隣接する兄弟要素を対象にします。 例:.sibling1 + .sibling2 -
全ての隣接セレクター（
~） 全ての隣接セレクターは、後に続くすべての兄弟要素を対象にします。 例:.sibling1 ~ .sibling2
SASSでコンビネーターを扱う方法
子孫セレクター（スペース）
SASSのネストでは、デフォルトでスペースの子孫セレクターが適用されます。
サンプル
1.container {
2 .header {
3 .title {
4 font-size: 20px;
5 }
6 }
7}コンパイル後のCSS
1.container .header .title {
2 font-size: 20px;
3}子セレクター（>）
子セレクターを使用したい場合、SASS内で明示的に>を記述します。
サンプル
1.container {
2 & > .header {
3 & > .title {
4 font-size: 20px;
5 }
6 }
7}コンパイル後のCSS
1.container > .header > .title {
2 font-size: 20px;
3}隣接セレクター（+）
同階層の直後の要素をスタイル指定するには、+を使用します。
サンプル
1.item {
2 & + .item {
3 margin-top: 10px;
4 }
5}コンパイル後のCSS
1.item + .item {
2 margin-top: 10px;
3}全ての隣接セレクター（~）
同階層で後続の全ての要素をスタイル指定したい場合は、~を使用します。
サンプル
1.alert {
2 & ~ .alert {
3 border-top: 1px solid red;
4 }
5}コンパイル後のCSS
1.alert ~ .alert {
2 border-top: 1px solid red;
3}疑似クラスや疑似要素とネスト
疑似クラスや疑似要素もSASS内で簡単に記述できます。
サンプル
1.button {
2 &:hover {
3 background-color: blue;
4 }
5 &::after {
6 content: '';
7 display: block;
8 }
9}コンパイル後のCSS
1.button:hover {
2 background-color: blue;
3}
4.button::after {
5 content: '';
6 display: block;
7}実践的なサンプル
以下は、複数のコンビネーターを組み合わせた複雑なスタイルの例です。
SASSコード
1.menu {
2 .menu-item {
3 & > .submenu {
4 display: none;
5
6 & > .submenu-item {
7 font-size: 14px;
8 }
9 }
10 & + .menu-item {
11 margin-left: 15px;
12 }
13 }
14}コンパイル後のCSS
1.menu .menu-item > .submenu {
2 display: none;
3}
4.menu .menu-item > .submenu > .submenu-item {
5 font-size: 14px;
6}
7.menu .menu-item + .menu-item {
8 margin-left: 15px;
9}まとめ
SASSでのネストとコンビネーターを正しく理解すれば、より簡潔で読みやすいCSSを記述できます。
YouTubeチャンネルでは、Visual Studio Codeを用いて上記の記事を見ながら確認できます。 ぜひYouTubeチャンネルもご覧ください。