隣接セレクタ
|
1 2 |
<div id="you" /> <div id="tonari" /> |
+記号を使って隣にあるセレクタを指定できます。
|
1 |
#you + #tonari |
Sass
|
1 2 3 4 |
#you { + #tonari { } } |
間接セレクタ
|
1 2 3 4 |
<div id="you" /> <div class="kouzoku" /> <div /> <div class="kouzoku" /> |
ある要素と同じ親に属する後続に対してスタイルを適用できる。チルダを使います。上のサンプルで言えば、youというidセレクタがある後ろのkouzokuという全ての後続セレクタに対してCSSが適用されます。
|
1 |
#you ~ .kouzoku |
Sass
|
1 2 3 4 |
#you { ~ .kouzoku { } } |
直下セレクタ
ある要素の直下にある要素にのみスタイルを適用できます。割とよく使います。
|
1 |
.parent > .child |
Sass
|
1 2 3 4 |
.parent { > .child { } } |
疑似要素
|
1 2 |
a:hover { } |
というのがあったらSassでは以下のように記述することが可能です。
|
1 2 3 4 |
a { &:hover { } } |
プロパティのネスト
セレクタだけでなくプロパティもハイフンで区切った要素をネストさせることができます。プロパティの場合は:(コロン)を使用してネストさせます。
|
1 2 3 4 5 6 7 8 |
ul { border: { bottom: { width: 1px; styled: solid; } } } |
生成されるCSS
|
1 2 3 4 |
ul { border-bottom-width: 1px; border-bottom-styled: solid; } |
注意点
プロパティのネストは少し記述に違和感があったりする場合もあるので、無理してそのように記述する必要はないかもしれません。その現場のコーディングルールによるとは思います。
メディアクエリのネスト
メディアクエリもネストして記述できます。
|
1 2 3 4 5 6 |
div { color:red; @media screen and (min-width:480px) { color:#fff; } } |
以下のように変換されます。
|
1 2 3 4 5 6 7 8 |
div { color: red; } @media screen and (min-width: 480px) { div { color: #fff; } } |
さらにメディアクエリ自体のネストをすることも可能です。
この記事へのコメントはありません。