CSS 疑似クラスと要素、およびその使用例に関するすべて

CSS では、Pseduo クラスと要素は、状態または要素の特定の部分に基づいてスタイルと要素を設定できるようにするセレクターに追加されるキーワードです。

例: アンカー要素にカーソルを合わせるか、さまざまなスタイルを追加して、リンクが訪問されたかどうかを確認したり、記事内の単語の最初の文字をターゲットにするために使用したりできます。これらのキーワードを使用すると、さらに多くのことを達成できます。

これらは主要なブラウザ間で広くサポートされており、初期バージョンから CSS の一部となっています。

疑似クラスとは何ですか?

擬似クラスは、特定の条件または状態に基づいて要素に適用されるルールを作成するようなものです。

擬似クラスは、ユーザーによる要素の操作方法によって要素の状態が変化する場合に使用されます。例:

• 誰かがボタンの上にマウスを置いたとき (:hover)
• 入力用にフォームフィールドが選択されている場合 (:focus)
• 要素がリスト内の最初または最後の子の場合

例を挙げて理解してみましょう:

a:hover {
  color: blue; 
}

a:visited {
  color: navyblue;
}

この例は、アンカー要素の 2 つの異なる状態を示しています。ユーザーがアンカー要素の上にマウスを移動すると、テキストの色が青に変わりますが、ユーザーがそのアンカー要素をクリックしてすでにアクセスしている場合は、別のデフォルト色が表示されます。

疑似クラスは、キーワード名の先頭にある単一のコロン : で表すことができます。以下は、いくつかの一般的な疑似クラスのリストです:

• ホバー – ユーザーがホバーオーバーしたとき (要素の上にマウスを置く)
• :focus – ユーザーがフィールド (フォーム内のテキスト ボックスなど) を選択したとき
• :nth-child(n) – リストまたはグリッド内の特定の項目のスタイルを設定する場合。
• :disabled – 要素 (ボタンなど) が無効になっていてクリックできない場合。

擬似要素とは何ですか?

擬似要素は要素全体ではなく特定の部分を対象とするため、擬似クラスとは異なります。通常は直接アクセスできない要素の特定の部分にスタイルを設定したり、要素を挿入したりできます。

擬似要素の例:

p::first-letter {      /* Accessing the first-letter of paragraph and adding style. */
  font-size: 2em; 
  font-weight: bold; 
  color: red;
}

この例は、段落の最初の文字にアクセスし、CSS を使用してスタイルを適用する方法を示しています。

お気づきかもしれませんが、疑似要素には :: コロン記号が 2 つ使用されていますが、:: コロン記号は疑似クラスに使用されています。これは両方の構文の実際の表現です。

なぜ疑似クラスと疑似要素なのか?

これらのツールを使用すると、余分な HTML や JavaScript を大量に記述することなく、CSS で非常に優れた機能を実行できます。わずか数行の CSS でデザインをより細かく制御でき、Web サイトをよりインタラクティブでダイナミックなものにできます。

両方を区別し、適切なツールを選択する方法を次に示します。

• 擬似クラスは、ホバー効果、フォーカスされた入力フィールド、リストの位置に基づくスタイルなどのインタラクションの作成に役立ちます。
• 擬似要素を使用すると、要素の特定の部分のスタイルを設定したり、要素の前後にアイコンやシンボルなどの装飾コンテンツを追加したりできます。

ブラウザのサポート

疑似要素と疑似クラスは、すべての主要なブラウザでサポートされていますが、Web が成長するにつれて、デフォルトでサポートされない新しいキーワードが追加されます。したがって、これらの問題を解決するにはブラウザー プレフィックスを使用する必要があります。

たとえば、:not() のような新しい疑似クラスは古いブラウザではサポートされていないため、動作が異なります。オンライン ツール Caniuse.com

結論

CSS の擬似クラスと擬似要素は、大量のコードを追加することなく生き生きとした美しい Web サイトをデザインするための秘密兵器として機能します。これらは、インタラクションまたは状態 (擬似クラス) に基づいて要素をスタイル設定したり、要素の特定の部分 (擬似要素) をターゲットにしたりするのに役立ちます。

このブログはもともと Programmingly.dev Web サイトに投稿されたものです。このリンクから記事全文をお読みください

以上がCSS 疑似クラスと要素、およびその使用例に関するすべての詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。