下記はヘッダー、メインコンテンツ、フッターの内側の幅を1000pxにして中央寄せしたい場合の例。

詳細度の違い

.entry-container :is(h1, h2, h3) =(同じ詳細度) .entry-container h1 .entry-container h2 .entry-container h3

.entry-container :where(h1, h2, h3) =(同じ詳細度) .entry-container

使用例

HTML

<header class="header">
	<div class="inner">
		ヘッダー
	</div>
</header>
<main class="main">
	<div class="inner">
		メイン
	</div>
</main>
<footer class="footer">
	<div class="inner">
		フッター
	</div>
</footer>

:is()

下記の①と②はどちらも同じです。

① :is() を使わない

CSS

.header .inner,
.main .inner,
.footer .inner {
	width: 1000px;
	margin-right: auto;
	margin-left: auto;
}

① :is() を使う

:is(.header, .main, .footer) .inner {
	width: 1000px;
	margin-right: auto;
	margin-left: auto;
}

CSS

SASSの場合はネストができるのであまり :is() の必要性はあまり感じることが無いかもしれません。

:where()

:where() は :is() と使い方は似ていますが、セレクタの詳細度を 0 に保つという違いがあります。

スタイルシートのカオス化を避けるためにも詳細度を低く保つことはとても重要なので、:where() はとても便利です。

① :where() を使わない

CSS

.header .inner,
.main .inner,
.footer .inner {
	width: 1000px;
	margin-right: auto;
	margin-left: auto;
}

② :where() を使う

CSS

:where(.header, .main, .footer) .inner {
	width: 1000px;
	margin-right: auto;
	margin-left: auto;
}

①と②の違い

どちらの場合でも同じスタイルが適用されるのですが、:where() は常に詳細度が 0 になります。
そのため例えば下記のように記述した場合 .inner の色は :where() の方が後に記述されているにもかかわらずオレンジになります。

/* こちらの方が詳細度が高くなりオレンジとなる */
.header .inner,
.main .inner,
.footer .inner {
	background-color: orange;
}

/* 詳細度 0 */
:where(.header, .main, .footer) .inner {
	background-color: skyblue;
}

【オマケ】not でも複数セレクタが設定できる

.section:not(.header, .main, .footer) .inner {
	background-color: skyblue;
}

コメントを残す

メールアドレスが公開されることはありません。