高度な CSS セレクター プロパティ: 疑似クラスと疑似要素

高度な CSS セレクター属性: 疑似クラスと疑似要素

はじめに:
CSS では、セレクターは開発者が DOM を正確に選択するのに役立つ重要な概念です。要素を選択し、スタイルを適用します。一般的な要素セレクター (タグ セレクターやクラス セレクターなど) に加えて、CSS はセレクターの機能をさらに強化できる 2 つのセレクター属性、擬似クラスと擬似要素も提供します。この記事では、読者がこれら 2 つの属性をより深く理解し、適用できるようにするために、疑似クラスと疑似要素の使用法を紹介し、具体的なコード例を示します。

1. 疑似クラス:
疑似クラスは、特定の状態または条件で要素を選択できる CSS セレクターです。一般的な疑似クラスには、:hover (マウスホバー)、:visited (リンクにアクセス済み)、:focus (フォーカスの取得) などが含まれます。疑似クラスの使用例をいくつか示します。

1. Mouseover スタイル:
   :hover は、要素上にマウスを置くスタイルを選択するために使用されます。たとえば、ボタンのマウスオーバー スタイルを設定できます。

button:hover {
  background-color: red;
}

2. 訪問済みリンク スタイル:
   :visited 訪問済みリンクの選択に使用されるスタイル。たとえば、訪問したリンクに下線を引くことができます。

a:visited {
  text-decoration: underline;
}

3. Get focus style:
   :focus 現在フォーカスされている要素の選択に使用されるスタイル。たとえば、フォーカスを取得した入力ボックスにスタイルを追加できます:

input:focus {
  outline: 2px solid blue;
}

2. 疑似要素:
疑似要素は CSS の別のセレクターです DOM 要素の特定の部分を選択することができます。一般的な疑似要素には、::before (要素の前にコンテンツを挿入)、::after (要素の後にコンテンツを挿入) などが含まれます。疑似要素の使用例をいくつか示します。

1. コンテンツの挿入:
   ::before および ::after は、要素のコンテンツの前後に指定されたコンテンツを挿入するために使用されます。たとえば、段落の前後に括弧を追加できます。

p::before {
  content: "(";
}

p::after {
  content: ")";
}

2. フロートのクリア:
   ::after もフロートをクリアするためによく使用されます。親要素にフロート要素が含まれている場合、::after を使用して空のコンテンツを追加し、clear 属性を設定してフロートをクリアできます。

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

3. 最初の文字スタイルを変更する:
   ::first-letter は、要素内の最初の文字を選択し、スタイルを適用するために使用されます。たとえば、最初の文字を大文字に設定できます:

p::first-letter {
  text-transform: uppercase;
}

結論:
疑似クラスと疑似要素は、セレクターの機能をさらに強化する CSS の重要な属性であり、開発に役立ちます。または、DOM 要素を正確に選択してスタイルを適用します。実際の開発では、より豊富なスタイル効果を実現するために、特定のニーズに応じて疑似クラスと疑似要素の使用を選択できます。この記事の紹介とサンプル コードを通じて、読者は疑似クラスと疑似要素について予備的な理解を持っていると思います。また、読者がこれら 2 つの属性をよりよく習得し、適用するのに役立つことを願っています。

以上が高度な CSS セレクター プロパティ: 疑似クラスと疑似要素の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。