サイトアイコン マーカーネット

コーディングに役立つCSS擬似クラス

コーディングに役立つCSS擬似クラス

こんにちは、コーダーのTです!

CSSセレクターは、HTML文書内の特定の要素を選択するために使用されます。
擬似クラス (pseudo-classes) は、セレクターに付加するキーワードであり、特定の状態にある要素を選択するセレクターです。
今回は「コーディングに役立つCSS擬似クラス」のご紹介します!

:root セレクターとは?

ドキュメントのルート要素(HTML 要素)にスタイルを適用するためのセレクターです。
これにより、ドキュメント全体に影響を与えるようなスタイル設定を集中管理できます。

:has() セレクターとは?

ある要素が特定の子要素を含む場合に、その要素自体にスタイルを適用するためのセレクターです。
従来の CSS セレクターでは表現が難しかった、より複雑な構造を持つ HTMLをスタイリングする際に非常に便利です。

:not() セレクターとは?

特定の要素を除外したいときに使うCSSのセレクタです。
ある条件に一致する要素 以外 にスタイルを適用したい場合に非常に便利です。

:active() セレクターとは?

ユーザーが要素をクリックしている間(アクティブ状態)に、その要素にスタイルを適用するための疑似クラスです。

:only-child() セレクターとは?

親要素の中でただ一つの子要素である要素 に対してスタイルを適用するための疑似クラスです。

:backdrop() セレクターとは?

オーバーレイ要素(例えば、モーダルやポップアップ)の背景にスタイルを適用するためのものです。

:empty() セレクターは?

中身が何も含まれていない要素 に対してスタイルを適用するための疑似クラスです。

最後に

この記事では、CSS擬似クラス種類や書く方法を紹介しました。
CSS擬似クラスはそれ以外もたくさんあります。擬似クラスに関するおすすめのサイトは「こちら」です。
利用するCSS擬似クラスを一度「互換性チェック」した方がいいと思います。
最後まで読んでくれてありがとうございました。
モバイルバージョンを終了