CSSシリーズの擬似クラスと擬似要素


擬似クラス


CSSダミークラスは、特定のセレクタに特殊な効果を追加するために使用されます.
  • アンカー偽類
  • フォーム擬似クラス
  • 構造化擬似クラス
  • アンカダミークラス

  • :link
  • :visited
  • :hover
  • :active
  • a:link {color: #FF0000}        /*        */
    a:visited {color: #00FF00}    /*        */
    a:hover {color: #FF00FF}    /*          */
    a:active {color: #0000FF}    /*       */

    フォーム擬似クラス

  • :checked
  • :disabled
  • :enabled
  • :focus
  • :required
  • :invalid
  • :valid
  • :in-range---選択要素指定範囲内の値
  • :out-of-range---指定範囲外の値の要素属性
  • を選択
  • :optional---「required」のない要素属性
  • を選択
  • :read-only
  • :read-write---読み取り専用属性のない要素属性
  • を選択

    構造化擬似クラス


    :first-child   :last-child   :nth-child(n)   :nth-last-child(n)  :only-child  
    :first-of-type---親要素に属する最初の特定のタイプの子要素の各要素に一致します.Last-of-type---エレメントの最後のサブエレメントに一致します.nth-of-type(n)---:nth-of-typeはnth-childと似ています.異なる点は、特定のタイプの要素のみが一致していることです.nth-last-type(n)---nth-last-of-typeはnth-of-typeと似ています.違いは、最後のサブ要素からカウントされる点です.only-of-type---エレメントが親エレメントの唯一の特定のタイプのサブエレメントである場合、only-childはエレメントに一致します.
    :not---パラメータセレクタに一致しない要素に一致する擬似クラスを否定します.target---URLにアンカーが付いている場合
    childと:nth-of-typeの違いについては、CSS 3セレクタ:nth-childと:nth-of-typeの違いを参照してください.

    その他


    :root---ドキュメントのルート要素に一致します.一般的なhtmlファイルのルート要素はhtml要素ですが、SVGまたはXMLファイルのルート要素は、lang---指定したlang属性を持つ要素にスタイルを追加する他の要素である可能性があります.
    任意の通常のセレクタは、任意の場所で偽クラスを使用できます.擬似クラス構文は大文字と小文字を区別しません.いくつかの擬似クラスの役割は反発し、他の擬似クラスは同じ要素で同時に使用することができます.また、ユーザがDOMを操作する際に生じるDOM構造の変化を満たすために、擬似クラスは動的であってもよい.

    ぎじげんそ


    CSSダミー要素は、特定のセレクタに特殊な効果を設定するために使用されます.

    擬似要素の内容


    :first-letter:first-line:before:after
    1つのセレクタは1つの擬似要素しか使用できず、擬似要素はセレクタ文の最後にある必要があります.
    2つのコロンを使用します::擬似クラスと擬似要素を区別するためです(CSS 2では区別されていません).もちろん、互換性を考慮すると、CSS 2に存在する疑似要素は依然として1つのコロン:の構文を使用することができるが、CSS 3に新たに追加された疑似要素は2つのコロン:::を使用しなければならない.
    擬似要素はDOMツリーにいくつかの抽象要素を作成し、これらの抽象要素はドキュメント言語に存在しません.