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の違いと、さらに多くのトップレベルドメインを見ようとしている理由

  前の記事

  

  基本ロゴデザインのデッドシンプルガイド