擬似クラス - 基本

（Alexis Goldstein、Louis Lazaris、Estelle Weylによる「HTML5＆CSS3」からの適応）

コアポイント

CSS擬似クラスは、構造、ユーザー操作、入力、ネガティブな擬似クラスなどの要素の特別な状態を定義するために使用されます。ドキュメントツリーの要素の位置、ユーザーインタラクション、フォーム要素状態、または特定のセレクターと一致しない要素に基づいて要素をスタイリングできます。

一部の擬似クラスには、攻撃者がユーザーのブラウジング履歴を確認するために使用できる

擬似クラスなどのセキュリティの問題がある場合があります。最新のブラウザは、この問題を防ぐために

に適用できるスタイルを制限します。アクセシビリティを向上させるには、すべての訪問者がマウスを使用してWebサイトを閲覧するわけではないため、:visitedを追加することをお勧めします。 :visited :hoverほとんどの最新のブラウザはすべてのCSS擬似クラスをサポートしていますが、一部の古いブラウザは:focusや

などの特定の擬似クラスをサポートしていない場合があります。 SelectivizrのようなJavaScriptライブラリを使用して、インターネットエクスプローラーなどのサポートがないブラウザーでこれらの擬似クラスを見つけることができます。

:nth-child():nth-last-child()css pseudo-class

ユーザーインタラクションの疑似クラス、すなわち、

、

、:link、:visited、:hoverに既に精通している可能性があります。 :active :focus

重要なヒント：キーポイント

擬似クラスにはセキュリティの問題がある可能性があるため、ブラウザは訪問リンクにすべてのCSSプロパティの適用をサポートしていません。これらの制限がなければ、悪意のあるWebサイトは、ユーザーが訪問されたリンクのスタイルについて人気のあるWebサイトまたは銀行にアクセスしたかどうかを確認できます（たとえば、訪問リンクアプリごとに固有の背景画像）。これにより、攻撃者は許可なくユーザーの閲覧履歴を表示できます。したがって、最新のブラウザは、

に適用できるスタイルを制限します。仕様により、これらの変更が明示的に許可されており、ユーザーエージェント（UAS）はすべてのリンクを到達していないリンクとして扱うこと、またはアクセスされていないリンクのさまざまな方法を提示しながらユーザーのプライバシーを保護するための他の測定値を実装できます。アクセシビリティを向上させるには、:visitedを追加します。ここで:visitedが含まれています。すべての訪問者がマウスを使用してウェブサイトを閲覧するわけではないためです。 :hoverは、リンクやフォームコントロールだけでなく、ページ上の任意の要素に適用できます。 :focusおよび:hoverは、リンク、フォームコントロール、編集可能なコンテンツ要素、および:focus属性を持つ任意の要素に関連しています。 :active tabindexこれらの基本的な擬似クラスをしばらく使用していたかもしれませんが、他にも多くの擬似クラスがあります。これらの擬似クラスのいくつかは、長年にわたって仕様の周りにありましたが、ブラウザがより関連性を高める新しいHTML5フォームプロパティをサポートし始めるまでサポートされていませんでした（または一般的に理解されていました）。次の擬似クラスは、属性、ユーザーインタラクション、およびフォーム制御ステータスに基づいた要素と一致します。

• :enabled：ユーザーインターフェイス要素を有効にしました。基本的には、disabled属性をサポートしているが現在その属性を適用していないフォームコントロールを任意の形式で制御しました。
• :disabled：代わりに、無効化されたユーザーインターフェイス要素：disabled属性をサポートし、現在その属性を適用している任意のフォームコントロール。
• :checked：選択またはチェックされたラジオボタンまたはチェックボックス。
• :indeterminate：選択されておらず、選択されていないフォーム要素。たとえば、すべてのチェックボックスを選択してチェックボックスのセットを選択してから、グループ内のすべてのチェックボックスを選択することを解除することを選択してください。選択されておらず、チェックされていません。
• :target：このセレクターは、現在アクティブなページのアンカーポイントのターゲット要素を選択します。これは、実際よりも複雑に聞こえます。ターゲットのIDの前に#文字を使用して、ページ内のアンカーへのリンクを作成できることをすでに知っています。たとえば、ページに「コンテンツへのスキップ」リンクがある場合があり、そのリンクをクリックした後、ID「コンテンツ」を持つ要素にジャンプします。これにより、アドレスバーのURLがthispage.html#contentに変更され、:targetセレクターがドキュメントの要素とID「コンテンツ」と一致するようになりました。一時的にセレクターを含めたようなものです#content。ユーザーが別のアンカーポイントをクリックすると、:targetが新しいターゲットと一致するため、「一時的」と言います。
• :default：同様の要素のセットのデフォルト値である1つ以上のUI要素に適用されます。たとえば、ページのロード時に同じ名前のラジオボタンのセットのラジオボタンが選択されている場合、同じ名前のグループ内の別のラジオボタンが選択されていない後も:defaultと一致し続けます。同様に、ページのロードがチェックされていない後も、ページのロードが:defaultに照合され続けるときに選択されたチェックボックスがあります。
• :valid：タイプ、パターン、またはその他の入力プロパティに基づいて有効な要素（第4章で説明したように）。
• :invalid：タイプまたはパターンの属性定義の要件を満たすことができない空の必要な要素と要素。
• :in-range：これらの制限内の範囲制限と値を持つ要素。たとえば、これは、minおよびmaxプロパティを備えた日付/時刻、数、および範囲の入力タイプに適用されます。値がnullの場合、それは:in-rangeです。
• :out-of-range：:in-rangeの反意語：値がその範囲制限を超える要素。欠損値は空であるため、範囲にありません。
• :required：:required属性セットを備えたフォームコントロール。
• :optional：すべてのフォームコントロール:required属性。
• :read-only：ユーザーの要素はコンテンツを変更できません。これらのほとんどは、contenteditable属性セットとフォームフィールドを持つ要素を除く要素です。
• :read-write：ユーザーは、コンポーネントや書き込み可能な入力フィールドなど、コンテンツの要素を変更できます。 contenteditable
フォームコントロールのプロパティをサポートするブラウザでは、これらのプロパティのブラウザのサポートが完了します。 IE8および以前のバージョンは、

、

、required、およびpatternをサポートしていません。良いニュースは、IE9がこれらのセレクターをサポートしているが、ユーザーインターフェイスセレクターではないことです。 IE10およびIE11は:valid、:invalidをサポートしますが、:checked、:enabled、:disabled、:target、:indeterminate、:required、または:optional CSS擬似クラス（FAQ）のFAQ :default:in-range（長さが長すぎて擬似オリジナルの目標と一致しないため、FAQの部分はここで省略されています。一部のFAQは、必要に応じて選択的に保持または書き直し、元の意味と一致することができます。）:out-of-range

以上が擬似クラス - 基本の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。