CSS | 疑似クラス:is()を使ったサンプルコード

2023-02-27CSS セレクタ,CSS

CSS | 疑似クラス:is()を使ったサンプルコード

疑似クラス「:is()」を使ったCSSのサンプルコード、動作サンプルを紹介しています。

疑似クラス:is()を使ったサンプルコード

「:is」はCSSで要素を複数条件でセレクタ指定する場合に通常の指定方法より纏めて記述する事が可能になる疑似クラスになります。

以前は「:matches()」という疑似クラスが利用されていました。（現在は非推奨または廃止）

See the Pen CSS | FlexBox does not align height by yochans (@yochans) on CodePen.

サンプル用のHTMLでは<header>タグ、<main>タグ、<footer>タグとそれぞれ内包する<p>タグを設置しています。

<header>
	<P>header</p>
</header>
<main>
	<P>main</p>
</main>
<footer>
	<P>footer</p>
</footer>

例えば、以下の2つのセレクタ指定は同じ内容になります。
疑似クラス「:is()」を使った場合の方がセレクタ指定を短く簡潔に記述する事ができます。

header p, main p, footer p  {
	font-size: 20px;
}

:is(header, main, footer) p  {
	font-size: 20px;
}

加えて、疑似要素を使ったセレクタ指定の場合はより短く簡潔なCSSでセレクタ指定をする事が可能になります。

header p:hover, main p:hover, footer p:hover  {
	font-size: 20px;
}

:is(header, main, footer) p:hover {
	color: red;
	cursor: pointer;
}

CSS セレクタ,CSS

Posted by Yousuke.U