CSS疑似クラスの最も確実なガイド

 a：訪れたcolor：＃8D20AE; .button：hover、.button：focus フォントの太さ：太字。  

状態ベースの擬似クラス

状態ベースの擬似クラスは、要素が追加されると要素に追加されます。 特定の静的状態にある. その最も有名な例のいくつかは以下のとおりです。

• ：チェックあり チェックボックスに適用できます）
• ：全画面表示 現在フルスクリーンモードで表示されている要素をターゲットにします。
• ：無効 以下のような無効モードになることができるHTML要素の場合 , , そして . 最も人気のある状態ベースの疑似クラスは、 ：チェックあり, チェックボックスがチェックされているかどうかを示すフラグ. .チェックボックス：オン+ラベルフォントスタイル：イタリック。入力：無効背景色：#EEEEEE; 3.構造的疑似クラス 構造的擬似クラスは要素を基にして要素を分類します 文書構造におけるそれらの位置. その最も一般的な例は ：第一子, ：最後の子, そして ：n番目の子（n） - その位置に基づいてコンテナ内の特定の子要素をターゲットにするためにallを使用することができます - そして ：ルート これはDOMの最高レベルの親要素をターゲットとします. 4.その他の疑似クラス 以下のように、分類が難しい雑多な他の擬似クラスもあります。 ：しない（x） セレクタxと一致しない要素を選択します ：lang（言語コード） 特定の言語のコンテンツの要素を選択します ：方向（方向性） 与えられた方向性（左から右または右から左）の内容を持つ要素を選択します. p：lang（ko）背景色：＃FFFF00;ルート背景色：＃FAEBD7; 第n子 vs タイプのn番目 疑似クラス 疑似クラスに関する最も難しいことの1つは、おそらく、それらの違いを理解することです。 ：nth-​​child そして ：n番目のタイプ 疑似クラス. どちらも構造擬似クラスであり、 親要素内の特定の要素 （コンテナ）、しかし異なる方法で. 仮定する n そして2 ：n番目の子供（n） である要素をターゲットにします。 その親要素の2番目の子, そして ：n番目の型（n） ターゲット 2番目の 同型 要素の （段落など） 親要素の中. 例を見てみましょう. / *その親要素内の2番目の子でもある段落* / p：nth-​​child（2）color：＃1E90FF; //親要素の内側の2番目の段落* / p：nth-​​of-type（2）font-weight：太字。 この短いCSSが2つの異なるケースでHTMLをどのようにスタイルするかを見てみましょう。. ケース1 ケース1では、aの内側の2番目の要素 順不同のリストなので、 第n子（2） ルールは適用されません。それは二人目の子供ですが、それは ではない 段落. しかし親要素が する 第二段落 N型（2） このルールは 他の要素を気にしない タイプ 親要素内の要素（順不同リストなど）の数. この例では、 N型（2） ルールは子供3である2番目の段落をスタイルしよう. パラグラフ1、子供1 番号なしリスト1、子2 段落2、子3 ケース2 2番目のケースでは、順不同リストを3番目に移動し、2番目の段落がその前に来ます。これは両方とも nth-child（2） そしてその ：ｎ型（２） 2番目の段落はその親の2番目の子でもあるため、規則が適用されます。 素子. パラグラフ1、子供1 パラグラフ2、子2 番号なしリスト1、子3 あなたがの違いについてもっと読みたいのなら ：子供のn番目 そして ：n番目のタイプ 疑似クラス、CSS Tricksには素晴らしい投稿があります。 SASSを使用している場合は、Family.scssを使用すると複雑なファイルを作成できます。 第n子'ified要素. 疑似クラスと疑似要素 擬似クラスについて話すとき、理解することも重要です 擬似要素とどう違うのか, 混同しないように. 疑似要素, といった ：：前 そして ::後 （それらを使用する方法については、このチュートリアルを参照してください）またです ユーザーエージェントによって追加された, そして CSSを使ってターゲットを絞ってスタイルを設定することができます。 擬似クラスと同じように. しかし、擬似クラスを使用してHTML要素を選択します。 文書ツリーに存在する 別にマークされていないだけで、疑似要素によって、 通常は存在しません DOMの中では、 ：：前 そして ::後）または既存の要素の特定の部分としてのみ（例： ：：最初の一文字 または ::プレースホルダー）. またあります 構文の違い. 擬似要素は一般に二重コロンで識別されます ::, 一方、疑似クラスは単一のコロンで識別されます。 ：. これはCSS2のように、疑似要素が同様にシングルコロンでマークされているように混乱を招くことがあります - ブラウザは疑似要素のためのシングルコロン構文を受け入れます. 擬似クラスと擬似要素の間にも違いがあります。 CSSでそれらをターゲットにする方法. 1. CSSセレクタシーケンスにおけるそれらの位置 擬似要素は現れることができるだけです 後に セレクタのシーケンス。一方、擬似クラスはCSSセレクタシーケンスのどこにでも配置できます。. たとえば、次のようにリスト要素の最後のリスト項目をターゲットにできます。 二つの方法で. ul>：last-child.red 色：＃B0171F; または ul> .red：最後の子色：＃B0171F; セレクタの最初のシーケンスは、内部の最後の子を選択します。 要素（それはクラスを持ちます .赤2番目の要素は、を持つ要素の中で最後の子を選択します。 .赤 クラス内 . ご覧のように, 疑似クラスの位置は変更可能. 擬似要素で似たようなことをしてみましょう. ul> .red :: after display：block;内容： '赤';カラー：＃B0171F。 上記のCSSコードは有効で、テキスト "red"が表示されます。 後に の クラスを持つアイテム .赤. 一方、このコードはうまくいきません。 擬似要素の位置を変更することはできません セレクターシーケンス内. ul> :: after.red display：block;内容： '赤';カラー：＃B0171F。 セレクタシーケンス内の発生数 また、疑似クラスはセレクタの横に1つだけ出現できますが、疑似クラスは疑似クラスです。 互いに組み合わせることができます 組み合わせが理にかなっている場合。たとえば、読み取り専用でもある最初の子要素をターゲットにするには、疑似クラスの組み合わせを作成します。 ：第一子 そして 読み取り専用 次のように ：最初の子：読み取り専用色：#EEEEEE; jQueryセレクタ拡張 のセレクターコード ： 構文は必ずしも適切なCSS疑似クラスを構成するわけではありません。これまでにjQueryを使ったことがあるなら、そのセレクターの多くを ： たとえば、構文 $（ '：checkbox'）, $（ '：input'） そして $（ '：selected'）. それを知っておくことは重要です これらは ではない CSS疑似クラス それはjQueryのターゲットになっています。それらはjQueryセレクタ拡張と呼ばれます. jQueryセレクタ拡張機能 より単純なキーワードでHTML要素をターゲットにする. それらのほとんどは、単一のキーワードで表される複数の通常のCSSセレクタの組み合わせです。. / * button、select、inputなど、すべての入力関連HTML要素のフォントを変更します* / $（ "：input"）.css（ "font-family"、 "courier new"） フィリップスのすべての色相電球の違い BelkinのWeMoスイッチとWeMoインサイトスイッチの違い Webデザインが退屈になる日 次の記事 .com、.net、.orgの違いと、さらに多くのトップレベルドメインを見ようとしている理由 前の記事 基本ロゴデザインのデッドシンプルガイド © 2025 Savtec 役立つ情報とWeb開発のヒント。 プログラミング、Webデザイン、CSS、HTML、JAVASCRIPT。 WINDOWSを構成して再インストールします。 サイトおよびアプリケーションをゼロから作成します。