【ITニュース解説】新しい擬似クラス:has()、:is()、:where()を使いこなそう ［CSS Modern Features no.1］

この記事では、CSSで使える新しい疑似クラス:has()、:is()、:where()について解説する。これらの疑似クラスを理解することで、より柔軟で効率的なスタイリングが可能になる。システムエンジニアを目指す初心者にとって、CSSはWebサイトやWebアプリケーションの見た目を制御する重要な技術であり、これらの新しい機能を知っておくことは、将来的な開発に役立つだろう。

まず、:has()疑似クラスから説明する。:has()は、指定された要素が特定の条件を満たす子要素を持っている場合に、その要素を選択する。従来のCSSでは、親要素から子要素の存在を条件にスタイルを適用することは難しかったが、:has()の登場によって、これが可能になった。

たとえば、div:has(> p)というセレクタは、「div要素の中に、直接の子要素としてp要素が存在する場合」にそのdiv要素を選択する。これは、特定の条件を満たす子要素を持つ親要素に対してスタイルを適用したい場合に非常に便利だ。

具体例として、画像と説明文がセットになった要素があるとする。画像がない場合に、説明文のスタイルを変更したい場合、:has()を使うと簡単に実現できる。例えば、.item:has(img)で画像を持つitem要素を選択し、.item:not(:has(img))で画像を持たないitem要素を選択できる。

次に、:is()疑似クラスについて説明する。:is()は、複数のセレクタをまとめて記述できる機能を提供する。これにより、同じスタイルを複数の要素に適用する場合に、コードの重複を減らすことができる。

例えば、h1, h2, h3というセレクタで、すべての見出し要素に同じスタイルを適用していた場合、:is()を使うと:is(h1, h2, h3)と記述できる。これは、コードの可読性を向上させ、メンテナンスを容易にする。

さらに、:is()はセレクタの優先度を調整するのにも役立つ。複数のセレクタを組み合わせた場合、CSSの優先度計算が複雑になることがあるが、:is()を使うことで、優先度をより明確に制御できる。

最後に、:where()疑似クラスについて説明する。:where()は、:is()と同様に複数のセレクタをまとめて記述できる機能を提供するが、:is()とは異なり、優先度を持たないという特徴がある。

CSSの優先度は、セレクタの種類や記述順序によって決まる。特定のスタイルを適用したい場合に、他のスタイルの影響を受けないようにするために、優先度を調整する必要がある。:where()を使うと、セレクタの優先度を気にせずにスタイルを適用できるため、より柔軟なスタイリングが可能になる。

例えば、body :where(h1, h2, h3)というセレクタは、body要素内のすべてのh1、h2、h3要素を選択し、スタイルを適用する。この場合、:where()によってセレクタの優先度が0になるため、他のセレクタの優先度に影響を与えることなくスタイルを適用できる。

これらの新しい疑似クラスを使いこなすことで、CSSの記述がより効率的になり、WebサイトやWebアプリケーションのスタイリングがより柔軟になる。システムエンジニアを目指す初心者にとって、これらの機能は必ずしもすぐに使う必要はないかもしれないが、CSSの可能性を広げる上で重要な知識となるだろう。今後のWeb開発において、これらの機能を活用する場面は増えていくと考えられるため、今のうちから理解しておくことをおすすめする。