編集長ブログ―安田英久

CSSの:afterと::afterどっちが正しい? 疑似クラスとか疑似要素って何?

セレクタで「:after」と「::after」がありますが、どちらが正しいのでしょうか。

今日は、Webの現場寄りに、CSSの話を。セレクタで「:after」と「::after」がありますが、どちらが正しいのでしょうか。そもそも、「疑似クラス」や「疑似要素」とはどういうものなのでしょうか。

CSSセレクタにはいろいろありますが、「::after」「::before」という書き方と、「:after」「:before」という書き方があります。

昔からCSSに触っている人は、「え? コロンが2つって何?」となると思います。使い慣れた「:after」と今の「::after」は何が違うのでしょうか。

疑似クラスは「:」、疑似要素は「::」

CSS3では、次のようにされています。

  • 疑似クラス」は「:hover」のようにコロン1つで書く
  • 疑似要素」は「::after」のようにコロン2つで書く

昔はどちらもコロン1つで書いていたのですが、CSS3でこの2つが区別できるように分けられました。古い人になじみがないのも当たり前ですね。

とはいうものの、昔に書かれていたCSSでは疑似要素もコロン1つで指定されていますので、昔から使われている疑似要素は、コロン1つで指定されていても、対応してくれるようです(:after:before:first-line:first-letter)。

まぁ、新たに書く場合に気にするようにするのと、解説などでコロンが2つ書かれていても気にせず納得するようにしましょう。

とはいうものの、「疑似クラス」とか「疑似要素」って何が違うのでしょうか。

疑似クラスはシンプルな状態、けっこう自由に使える

「疑似クラス」は、HTML外の要因による状態や、一般的なシンプルなセレクタでは指定できないものを指します。

ふつうにHTMLでタグに付ける「クラス」の延長のようなものととらえるとわかりやすいでしょう。

  • :link
  • :visited
  • :hover
  • :active
  • :focus
  • :target
  • :lang()
  • :enabled
  • :disabled
  • :checked
  • :indeterminate
  • :root
  • :nth-child()
  • :nth-last-child()
  • :nth-of-type()
  • :nth-last-of-type()
  • :first-child
  • :last-child
  • :first-of-type
  • :last-of-type
  • :only-child
  • :only-of-type
  • :empty
  • :not()

:hover:activeなど、ユーザーの行動やブラウザに記録された状態によって、同じHTMLでも状態が変わるものもあります。

1つの要素にクラス名を付けられるように、疑似クラスも複数の状態をもっていることがあり、たとえば:checked:focusのように複数の疑似クラスを指定できます(同時に指定しても意味のないものもありますが)。

また、疑似クラスはセレクタのなかでどこにでも指定できます。

疑似要素は抽象的な要素、利用には制限がある

「疑似要素」は、HTML(実際にはDOMツリー)内に、通常のHTMLでは指定できない「抽象的な要素」を作りだすものです。

わかりやすく言うと、<p>や<div>のようなタグ(これを「要素」と呼びます)の延長のようなものですね。要素の一部分を独立した要素として扱ったり(::first-letterなど)、実際には存在しない要素作り出したり(::before::after)できます。

  • ::first-line
  • ::first-letter
  • ::before
  • ::after

現在の仕様では、1つのセレクタに疑似要素は1つしか指定できません。また、セレクタ内で原則として最後に指定します。

◇◇◇

いかがでしょうか。「:」が1つと2つの違い、疑似クラスと疑似要素の違いがわかりましたでしょうか。

ちなみに、すでにCSSセレクタ4の仕様策定が(かなり前に)始まっていて、親子構造を指定したうえで最も下位の要素以外を選ぶセレクタなど、だれもが一度はやりたいと思ったけれどもCSS3まではできなかった指定などが含まれています。

早くセレクタ4が実用になるといいですね。

この記事が役に立ったらシェア!
tweet44はてなブックマークに追加
みんなが読んでるWeb担メルマガで、あなたも最新情報をチェック
  • SEOやアクセス解析のなどノウハウをゲット
  • 事例やインタビューも見逃さない
  • 要チェックのセミナー情報も届く
  • 編集長コラムを一足先に読める

日本赤十字社 東日本大震災 義援金募集
みんなが読んでるWeb担メルマガで、あなたも最新情報をチェック
  • SEOやアクセス解析のなどノウハウをゲット
  • 事例やインタビューも見逃さない
  • 要チェックのセミナー情報も届く
  • 編集長コラムを一足先に読める

人気記事トップ10(過去7日間)

今日の用語

重複コンテンツ
同じドメイン名内、または他のドメイン名にわたって存在する、「内容は同じだがURL ... →用語集へ

インフォメーション

Web担のメルマガを購読しませんか?
Web担の記事がコンパクトに毎週届くメールマガジン「Web担ウィークリー」は、10万人が読んでいる人気メルマガ。忙しいあなたの情報収集力をアップさせる強い味方で、お得な情報もいち早く入手できます。

Web担に広告を掲載しませんか?
購読者数10万人のメールマガジン広告をはじめとする広告サービスで、御社の認知向上やセミナー集客を強力にお手伝いいたします。

サイトマップ
RSSフィード


Web担を応援して支えてくださっている企業さま [各サービス/製品の紹介はこちらから]

GOLD SPONSOR
さくらインターネット株式会社株式会社KDDI ウェブコミュニケーションズ株式会社日本レジストリサービスオープンテキスト株式会社トランスコスモス株式会社株式会社ハイパーボックスDomain Keeper
SPONSOR
株式会社キノトロープ株式会社アイレップ株式会社ニューズ・ツー・ユーシックス・アパート株式会社ウェブアンテナ株式会社サイバーエージェント富士通株式会社Sitecore