Web Marketing Blog

株式会社プレスマンのWebマーケティング部によるスタッフブログです。

コーディング

擬似要素はダブルコロン、擬似クラスはシングルコロンで記述しよう。

2016年8月24日

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

-コーディング
-,

Copyright© Web Marketing Blog , 2019 All Rights Reserved.