564 views
この記事は最終更新から 615日 が経過しています。
(1) & 親セレクタ参照
一つ遡って、親要素に対して適用したい場合に使用する。
a{
color: #fff;
&:hover{
color: #0f0;
}
}
【例】div要素に対して二つのクラス red, blueでデザインを変えたい場合の記述例
<<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Sample#159</title>
<style>
div{
padding: 10px;
background-color: #eee; /* gray */
&.red{
background-color: #e88; /* red */
}
&.blue{
background-color: #88e; /* blue */
}
}
</style>
</head>
<body>
<div>
あああああ
</div>
<div class="red">
いいいいい
</div>
<div class="blue">
ううううう
</div>
</body>
</html>
サンプルコードを以下にアップした。
https://www.dogrow.net/hp/sample/00159
(2) > 子要素セレクタ
直下の子要素に対してのみ適用したい場合に指定する。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Sample#159</title>
<style>
div{
padding: 10px;
background-color: #eee; /* gray */:
&.top{
background-color: #e88; /* red */
>div{
background-color: #88e; /* blue */
}
}
}
</style>
</head>
<body>
<div class="top">
<div>
<div>
あああああ
</div>
</div>
</div>
</body>
</html>
サンプルコードを以下にアップした。
https://www.dogrow.net/hp/sample/00159/index2.html
あれっ？
上記のコード中では、無意識に SCSSの構文で styleを記述してしまった。
でも、Chrome, Edge, Firefoxのいずれも意図した通りに表示してくれた。
簡単な SCSSならば、メジャーなWebブラウザはサポートしてくれるんだ！
アクセス数（直近7日）: ※試験運用中、BOT除外簡易実装済2026-05-25: 0回 2026-05-24: 0回 2026-05-23: 0回 2026-05-22: 0回 2026-05-21: 0回 2026-05-20: 0回 2026-05-19: 0回