CSS3からafterやbeforeなどの擬似要素(Pseudo-elements)の記述は、ダブルコロン(::)になりました。
これはhoverなどの「擬似クラス(Pseudo-classes)との差別化をはかるため」とのことです。
今までどおり、シングルコロン(:)でも正常に動作しますが、今後を考えると、これからはダブルコロンで記述したほうが良さそうです。
擬似要素一覧
ダブルコロン(::)で記述します。
- ::first-letter ・・・ 最初に現れる文字に適用
- ::first-line ・・・ 最初の行に適用
- ::before ・・・ 要素の前に内容を追加
- ::after ・・・ 要素の後に内容を追加
- ::selection ・・・ ユーザがハイライトした部分に適用
擬似クラス一覧
シングルコロン(:)で記述します。
- :active
- :any
- :any-link
- :checked
- :default
- :defined
- :dir()
- :disabled
- :empty
- :enabled
- :first
- :first-child
- :first-of-type
- :fullscreen
- :focus
- :hover
- :indeterminate
- :in-range
- :invalid
- :lang()
- :last-child
- :last-of-type
- :left
- :link
- :not()
- :nth-child()
- :nth-last-child()
- :nth-last-of-type()
- :nth-of-type()
- :only-child
- :only-of-type
- :optional
- :out-of-range
- :read-only
- :read-write
- :required
- :right
- :root
- :scope
- :target
- :valid
- :visited

Webマーケティング部のスタッフです。主にデザインとコーディングを担当しています。見やすさ&わかりやすさ、それにちょっぴり遊び心を加えたWebデザインを目指しています。