CSS 擬似クラスの使い方
この文書では、CSS 擬似クラスの概念、構文、そして実際のプロジェクトでそれらを使用して動的なエフェクトやインタラクティブな体験を実現する方法について詳しく説明します。
一、CSS 擬似クラスとは？
- 擬似クラスの定義：要素の特別な状態、たとえばマウスホバー、リンクの訪問状態などを記述するセレクタです。
- 擬似要素との違い：擬似クラスは既存の要素の状態を選択します。一方、擬似要素は新しい要素を作成します。
- 擬似クラスの利点：JavaScript を使用せずに豊富なインタラクティブなエフェクトを実現できるため、コードを簡素化し、効率を高めることができます。
二、CSS 擬似クラスの構文
-
基本構文：
selector:pseudo-class { /* スタイル規則 */ } -
一般的な擬似クラスのカテゴリ：
-
動的擬似クラス：
:hover、:active、:focusなど、ユーザーインタラクションに応じてスタイルを変更します。 -
ターゲット擬似クラス：
:targetは、URL フラグメント識別子が指す要素を選択します。 -
構造擬似クラス：
:first-child、:nth-child(n)など、ドキュメントツリー内での要素の位置に基づいて要素を選択します。 -
フォーム擬似クラス：
:checked、:disabled、:validなど、フォーム要素の状態に基づいて要素を選択します。
-
動的擬似クラス：
-
擬似クラスの組み合わせ：複数の擬似クラスを同時に使用できます。たとえば、
a:hover:not(:visited)のように使用します。
三、よく使用される CSS 擬似クラスの詳細
-
:link、:visited、:hover、:active：リンクの 4 つの状態擬似クラスと適用シナリオ。:link: 未訪問のリンク:visited: 訪問済みのリンク:hover: マウスが要素上にあるとき:active: 要素がアクティブになっているとき (クリックされているときなど)
a:link { color: blue; } a:visited { color: purple; } a:hover { text-decoration: underline; } a:active { color: red; } -
:focus：フォーカスされている要素のスタイルを設定します。input:focus { border: 2px solid blue; } -
:first-child、:last-child、:nth-child(n)：特定の位置にある要素を選択する適用テクニック。li:first-child { font-weight: bold; } li:last-child { font-style: italic; } li:nth-child(even) { background-color: #f2f2f2; } -
:empty：空の要素を選択する実用的なシナリオ。p:empty::before { content: "この段落は空です。"; } -
:checked、:disabled、:valid、:invalid：フォーム要素の状態制御とユーザーエクスペリエンスの最適化。input:checked + label { font-weight: bold; } input:disabled { opacity: 0.5; } input:valid { border-color: green; } input:invalid { border-color: red; }
四、CSS 擬似クラスの実際の適用
-
ナビゲーションメニューのインタラクティブエフェクト：
:hoverを使用して、ドロップダウンメニュー、ハイライト表示などを実現します。 -
フォーム検証のヒント：
:valid、:invalidを利用してリアルタイムフィードバックを提供し、ユーザーエクスペリエンスを向上させます。 -
動的ボタンスタイル：
:activeと組み合わせてボタンを押したときのエフェクトをシミュレートし、インタラクティブ性を高めます。
五、まとめ
- CSS 擬似クラスは、開発者に強力なスタイル制御機能を提供し、さまざまな動的エフェクトやインタラクティブな体験を簡単に実現できるようにします。
- よく使用される CSS 擬似クラスを習得することで、開発者はより簡潔で効率的なコードを記述し、Web ページの使いやすさとユーザーエクスペリエンスを向上させることができます。
関連リソース
よくある質問
1. 擬似クラスと擬似要素の違いは何ですか？
擬似クラスは要素の既存の状態を選択するのに対し、擬似要素は要素のコンテンツの前後にコンテンツを挿入するなど、要素に新しい部分を適用します。擬似クラスはコロン (:) を使用して定義され、擬似要素は二重コロン (::) を使用して定義されます。
2. :hover 擬似クラスがモバイルデバイスで機能しないのはなぜですか？
モバイルデバイスにはマウスホバーの概念がないため、:hover 擬似クラスは期待どおりに機能しない場合があります。代わりに、タッチイベントを検出する JavaScript を使用するか、CSS メディアクエリを使用してモバイルデバイスに異なるスタイルを適用することを検討してください。
3. 複数の擬似クラスを組み合わせて使用できますか？
はい、複数の擬似クラスを組み合わせて使用して、より具体的なスタイルを適用できます。たとえば、a:hover:not(:visited) は、訪問していないリンクにのみホバースタイルを適用します。