疑似要素と疑似クラスはどちらも、セレクターの後に特定のキーワードを追加し、同様の構文ルールに従い、CSS ルール ブロックで対応するスタイルを設定することによって定義されます。疑似要素は、content 属性を通じてコンテンツを追加または置換できます。たとえば、:before および :after では、テキスト、画像、またはその他の生成されたコンテンツを挿入できます。疑似クラスは要素のスタイルにのみ影響し、コンテンツの追加や変更は行いません。これらは、ユーザーの操作、文書構造、またはその他の論理条件に基づいて要素の動作を変更します。主な違いは次のとおりです。
対象オブジェクト:
疑似クラス セレクター(疑似クラス) は、実際の既存の要素に作用し、リンクのアクセス ステータス ( :visited )、マウス ホバー ステータス ( :hover ) など、要素の特定のステータスまたは関係を記述するために使用されます。 ( :first-child ) の最初の子要素であるかどうかなど。これらは要素の構造を直接変更しませんが、特定の条件下で要素がどのように動作するかに影響します。疑似要素セレクターは、要素内の特定の部分を作成して選択するか、要素の前後に新しい仮想コンテンツ ノードを生成するために使用されます。たとえば、 :beforeと:after追加のコンテンツを挿入するために使用でき、 :first-lineと:first-letterそれぞれテキストの最初の行と要素の最初の文字を選択し、 :markerリスト項目のマーク スタイルを制御します。 。これらの疑似要素は HTML ドキュメント内の実際の要素に対応しませんが、ドキュメントの実際の部分であるかのようにスタイルを適用できます。
文法識別子:
疑似クラスは通常、 :hover 、 :focusなどのコロン: :) で識別されます。 CSS3 では、疑似要素は 2 つの連続したコロン ( :: :) によって識別され、古いバージョンの CSS の疑似クラスと区別されます。最新のブラウザのほとんどは、疑似要素 ( :beforeなど) を表す単一コロンを引き続き受け入れますが、W3C 標準に準拠し、ベスト プラクティスを維持するために、 ::before 、 ::afterなどの二重コロン形式を使用することをお勧めします。 。
再利用性:
疑似クラスは、ホバーとフォーカスの両方のリンクを表すa:hover:focusなど、同じセレクター内で組み合わせることができます。擬似要素は要素の特定の部分または生成される新しいコンテンツを表すため、通常、同じセレクター内に繰り返し出現することはできません。要素は、同時に有効な:beforeまたは:after疑似要素を 1 つだけ持つことができます。
CSS3 擬似要素は、開発者が HTML 構造を変更せずに CSS を通じて要素の特定部分のスタイルを追加または変更したり、要素の内部または外部に仮想コンテンツを生成および制御したりできる特別な CSS セレクターです。以下は、いくつかの一般的な CSS3 擬似要素の詳細な説明と適用例です。
1. :beforeと:after
:beforeおよび:after擬似要素はそれぞれ、選択した要素のコンテンツ領域の後に、コンテンツのない、非表示の新しい「子要素」を作成します。そして、この疑似要素にスタイル（内容、サイズ、色、背景など）を設定することで可視化され、視覚的には元の要素の内容の直後の部分として表示されます。これらのコンテンツはcontent属性によって定義され、追加のスタイルを適用できます。
文法：
セレクタ:前{
content: "..." /* または他の値 */;
/* 他のスタイル宣言 */
}
セレクタ:{の後
content: "..." /* または他の値 */;
/* 他のスタイル宣言 */
}このうち、 content属性は、擬似要素によって生成されるコンテンツを定義する鍵となります。次の値を受け入れることができます。
String : 表示する文字列を直接指定します。 content: "—"; (ダッシュ) など、引用符で囲まれた HTML エンティティ。 URL : content: url(image.png); content: counter(name); (counter) またはcontent: attr(attribute-name); (要素の属性値を取得) などのコンテンツ キーワードを生成します。
応用例：
1.1. 装飾コンテンツを追加する
引用符、アイコン、その他の装飾要素を追加します。
引用符を追加します:
ブロック引用:{の前
内容: オープンクォート;
フォントサイズ: 大きくなります。
カラー:#666;
}
ブロック引用:{の後
内容: クローズクオート;
}リスト項目の前後にカスタム アイコンを追加します。
リ:前 {
コンテンツ: url(icon-checkmark.svg);
マージン右: 0.5em;
}
li.completed:後 {
content: "2713"; /* Unicode 文字: チェックマーク */
色: 緑;
フォントサイズ: 1.5em;
垂直整列: スーパー;
}1.2. フロートをクリアする
:after 、空のブロックレベル要素を作成するためによく使用され、後続の要素へのフローティングの影響をクリアし、「高さの崩壊」問題を回避するために、 clear:bothとともに使用されます。
.clearfix:後 {
コンテンツ： "";
表示: テーブル;
クリア：両方。
}内部フロートをクリアする必要があるコンテナ要素に.clearfixクラスを適用します。
1.3. HTML コンテンツの置換または拡張
attr()関数を使用すると、要素の属性から値を:afterの内容として抽出し、動的なテキスト表示を実現できます。
略語[タイトル]:{の後
内容: " (" attr(title) ")";
フォントサイズ: 小さくなります。
色: グレー;
}この例では、 title属性を持つabbr要素の上にマウスを置くと、 title属性の値を含む小さな灰色の括弧が表示されます。
1.4. 複雑な形状とアニメーションを実装する
content 、 background 、 borderおよびその他のプロパティ、および CSS3 のtransform 、 transition 、またはanimationと組み合わせると、 :after使用して複雑な形状やアニメーション効果を作成できます。
.button:後 {
コンテンツ： "";
表示: インラインブロック;
幅: 0;
高さ: 0;
ボーダートップ: 1/3em のソリッド透明。
境界線右: 1/3 em の完全な透明。
ボーダーボトム: 1/em ソリッド #007BFF;
境界左: 1/3em の透明な実線。
マージン左: 0.1/2em;
}
.button:hover:after {
変換：translateY(-0.1em);
トランジション: トランスフォーム 0.2 秒イーズインアウト;
}上記のコードは、 .button要素の後に三角形のドロップダウン矢印を作成し、マウスオーバー時に滑らかな下向きのアニメーションを実装します。
注意事項
:after疑似要素はcontent属性とともに使用する必要があります。そうでない場合は、効果がありません。 :after作成された仮想要素であるため、JavaScript を介して DOM 操作を実行することはできません。 :afterによって生成されたコンテンツはレイアウトに参加できますが、DOM には含まれず、セマンティクスには影響せず、キーボード ナビゲーションなどのアクセシビリティ機能にも影響しません。
要約すると、CSS3 擬似要素セレクターは、HTML 構造を変更せずに要素コンテンツの後にカスタム コンテンツを挿入することで、Web デザインの表現力を大幅に強化します。疑似要素やその他の CSS テクニックを上手に使用すると、開発者はより美しく、応答性が高く、メンテナンスが容易な Web インターフェイスを構築できます。
2. :first-lineと:first-letter
:first-line擬似要素セレクターは要素内のテキストの最初の行のスタイルを設定するために使用され、 :first-letter擬似要素は要素内の最初の文字のスタイルを設定するために使用されます。
文法：
セレクター:最初の行 {
/* スタイル宣言 */
}
セレクター:最初の文字 {
/* スタイル宣言 */
}応用例：
最初の行のインデント:
記事の p:first-line {
テキストインデント: 2em;
}大文字と装飾:
記事 h2:最初の文字 {
フォントサイズ: 2em;
フロート: 左;
マージン右: 0.5em;
行の高さ: 0.8;
色: #8A2BE2;
背景色: #F8F8FF;
パディング: 0.2/3em 0.1/3em;
境界半径: 0.5em;
}CSS3 擬似クラス セレクターは、開発者がドキュメント ツリー内の位置やクラスや ID などの固有の属性ではなく、要素の状態に基づいてスタイルを正確に配置して適用できる強力なツールです。これらのセレクターは特別な構文構造を使用して、ユーザー インタラクション、位置関係、コンテンツ特性などの要素のさまざまな条件状態を記述し、それによって動的で応答性の高い Web デザインを実現します。以下に、CSS3 疑似クラス セレクターの詳細な説明とその実際のアプリケーションの例を示します。
1. 静的疑似クラスセレクター
:linkと:visited
:link : ユーザーがアクセスしていないハイパーリンク ( <a>要素) を選択するために使用されます。通常、未訪問のリンクの基本スタイルを設定するために使用されます。
a:リンク{
色: 青;
テキスト装飾: なし。
} :visited : ユーザーが訪問したリンクを選択します。訪問済みリンクの差別化されたスタイルを設定するために使用されます。
a: 訪問しました {
色: 紫;
} 2. ユーザーインタラクション疑似クラスセレクター:hover 、 :focus 、 :active
:hover : マウス ポインターが要素上にあるときに要素と一致します。
ボタン:ホバー {
背景色: #f0f0f0;
カーソル: ポインタ;
} :focus : フォーカスを受け取る要素を選択します。これは、フォーム コントロールまたはフォーカス可能な要素 ( <input> 、 <textarea> 、 <button>など) で一般的に見られます。
入力:フォーカス {
アウトライン: 2px ソリッド #007BFF;
ボックスシャドウ: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
} :active : ユーザーが要素をアクティブ化または押していることを示すために使用されます (通常はマウスのクリックまたはタッチ スクリーンの押下)。
a:アクティブ {
色: 赤;
フォントの太さ: 太字;
} 3. 構造化された疑似クラス セレクター:first-child 、 :last-child 、 :only-child 、 :nth-child(n)など。
:first-child : 親要素の最初の子である要素を選択します。
li:最初の子 {
リストスタイルタイプ: 正方形;
} :last-child : 親要素の最後の子である要素を選択します。
div > p:last-child {
マージンボトム: 0;
} :only-child : 兄弟のない要素を選択します。
.message:一人っ子 {
境界線の幅: 2px;
} :nth-child(n) : 親要素の n 番目の子要素を選択します。ここで、 n数値、キーワード ( even 、 odd )、または式 ( 2n+1など) です。
li:nth-child(2n) {
背景色: #f9f9f9;
}4. コンテンツ関連の疑似クラスセレクター
:empty 、 :target 、 :enabled 、 :disabled 、 :checkedなど。
:empty : コンテンツのない要素 (子要素、テキスト ノードなどを含む) を選択します。
div.empty:空 {
表示: なし。
} :target : 現在の URL フラグメント識別子 (ハッシュ) が要素 ID と一致する要素を選択します。
#コンテンツ:ターゲット {
背景色: 薄黄色;
} :enabledおよび :disabled: 有効状態と無効状態のフォーム要素をそれぞれ選択します。
入力:有効化 {
背景色: 白;
}
入力:無効化 {
不透明度: 0.6;
カーソル: 許可されていません。
} :checked : チェックボックス ( <input type="checkbox"> )、ラジオボタン ( <input type="radio"> )、または<option>要素が選択されている場合に使用されます。
input[type="checkbox"]:checked + label {
テキスト装飾: ラインスルー;
}5. 疑似クラスセレクターを否定する
:not(selector)
:not() : 括弧内に指定されたセレクターと一致しない要素を選択します。
/* クラス「exclude」を持つすべての段落を除外します */
p:not(.exclude) {
色: 緑;
}6. その他の疑似クラスセレクター
:root 、 :nth-of-type(n) 、 :nth-last-of-type(n) 、 :first-of-type 、 :last-of-type 、 :only-of-typeなど。
:root : ドキュメントのルート要素 (通常は HTML ドキュメントの<html>要素) を選択します。
：根 {
--原色: #3498db;
} :nth-of-type(n)および :nth-last-of-type(n): :nth-child(n)に似ていますが、兄弟要素のうちの特定の型の子要素のみを対象とします。
記事:n 番目のタイプ(偶数) {
背景色: #f5f5f5;
} :first-of-type 、 :last-of-type 、および :only-of-type: はそれぞれ、兄弟要素の中から特定の型の最初、最後、または唯一の子要素を選択します。
div > p:first-of-type {
フォントの太さ: 太字;
}上記の CSS3 疑似クラス セレクターとそのアプリケーション シナリオをマスターすることで、開発者はより効率的で表現力豊かでインタラクティブな CSS コードを作成して、Web サイトのユーザー エクスペリエンスと視覚効果を向上させることができます。 CSS 標準が進化し続けるにつれて、より多くの新しい擬似クラス セレクターが CSS3 の仲間入りをして、フロントエンド開発のためのより豊富で洗練された制御方法を提供する可能性があります。
疑似クラスであれ疑似要素であれ、それらはすべて CSS セレクターの機能を強化するように設計されており、開発者は HTML 構造を変更せずに要素のスタイルとレイアウトをより細かく制御できるようになります。
CSS3 擬似要素と擬似クラス セレクターの違い、詳細な説明、および適用例についてのこの記事はこれで終わりです。CSS3 擬似要素と擬似クラス セレクターの詳細については、downcodes.com で以前の記事を検索するか、閲覧を続けてください。以下の関連記事、今後ともdowncodes.comをよろしくお願いします！