CSSの擬似クラスと擬似要素の使い方とその違いを詳しく解説

CSS 疑似クラスと疑似要素の違いと使用法の詳細な説明

疑似クラスと疑似要素は、CSS でよく使用される概念です。 HTML 内の特定の要素を選択してスタイル設定するのに役立ちます。名前は似ていますが、使用方法と機能が異なります。この記事では、CSSの疑似クラスと疑似要素の違いを詳しく説明し、具体的なコード例を示します。

1. 疑似クラス
まず、疑似クラスについて説明します。疑似クラスは、DOM ツリー (ドキュメント オブジェクト モデル) 内の特定の状態またはプロパティを選択してスタイル設定するために使用されるセレクターです。疑似クラスは通常、コロン (:) で表されます。

1. :hover 擬似クラス
   : hover 擬似クラスは、マウスが要素上にあるときにスタイルを適用するために使用されます。任意の HTML 要素に適用できます。

たとえば、リンク上にマウスを置くと、:hover 疑似クラス:

a:hover {
  color: red;
}

2. :active pseudo- を使用してリンクの色を変更できます。 class
   :active 疑似クラスは、リンク上でマウスをクリックするなど、ユーザーが要素をアクティブ化したときにスタイルを適用するために使用されます。

たとえば、ユーザーがボタンをクリックしたときにボタンの背景色を変更できます。

button:active {
  background-color: yellow;
}

3. :nth-child pseudo-class
   :nth -child pseudo-class は、同じ親要素の下の特定の位置にある子要素を選択するために使用されます。

たとえば、テーブル内の偶数行を選択してスタイルを設定できます:

tr:nth-child(even) {
  background-color: #f2f2f2;
}

2. 疑似要素
次は、疑似要素について話しましょう。疑似要素は、DOM 内で新しい要素を作成し、スタイルを設定するために使用されます。疑似要素は通常、二重コロン (::) で表されます。

1. ::before 擬似要素
   ::before 擬似要素は、選択した要素の前にコンテンツを作成して挿入するために使用されます。これを使用して、アイコンやその他の追加のテキスト コンテンツなどの装飾要素を追加できます。

たとえば、段落の前にコメントを追加できます:

p::before {
  content: "注：";
  font-weight: bold;
}

2. ::after pseudo-element
   ::after pseudo-element is used選択した要素にコメントを追加します。コンテンツを作成して、 の最後に挿入します。また、装飾要素や追加のテキスト コンテンツを追加するために使用することもできます。

たとえば、リンクの最後に矢印アイコンを追加できます:

a::after {
  content: " →";
}

3. ::first-letter pseudo-element
   ::first-文字擬似要素 要素の最初の文字を選択し、スタイルを設定するために使用されます。ブロックレベルの要素にのみ適用できます。

たとえば、段落の最初の文字を大文字に設定し、その色を変更できます。

p::first-letter {
  font-size: 2em;
  text-transform: uppercase;
  color: blue;
}

概要:
要約すると、擬似クラスと擬似要素CSS の は、HTML 要素のさまざまな状態や特定の部分を選択してスタイル設定するのに役立つ非常に便利なツールです。疑似クラスは主に特定の状態にある要素を選択するために使用され、疑似要素は主に新しい要素の作成とスタイル設定に使用されます。疑似クラスと疑似要素を柔軟に使用することで、Web ページをより適切に制御し、設計できるようになります。

この記事が、CSS 疑似クラスと疑似要素の理解と使用に役立つことを願っています。

以上がCSSの擬似クラスと擬似要素の使い方とその違いを詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。