anti scroll

ブラウザと小説の新しい関係を模索する

10秒でわかるpseudo-classとpseudo-elementの違い

pseudo-class

pseudo-classは、左側のセレクターに続けて「〜が」と読みます。

/* liが最初の子だった場合 */
li:first-child{
  margin-top:0;
}

「〜が」だから、左側のセレクタがマッチする要素です(上の例ではli)。

pseudo-element

pseudo-elementは、左側のセレクターに続けて「〜の」と読みます。

/* liの先頭文字 */
li::first-letter{
  font-size:3em;
}

「〜の」だから、左側のセレクタとは 別の element(上の例では::first-letterというelement)にマッチします。

まとめ

どちらもpseudoと付いていますが、全く性質の異なるものです。

しかし古い仕様ではコロンがどちらも1つで記述されていて(例えば:first-letterとか)、紛らわしいという問題がありました。

なので最新の仕様では

  • pseudo-classにつくコロンの数は1つ(:first-childとか:last-childとか)
  • pseudo-elementにつくコロンの数は2つ(::first-letterとか::beforeとか)

というのが、正式な文法となっています。

ただし古いCSSと互換性を保つために、大体のブラウザではコロン1つでも通るようになっています。

余談

ちなみにnehan.jsの場合、コロンの数は厳密に区別します。

つまり::first-letterとすべきところを:first-letterと書いてしまうと、単に「未定義のpseudo-class」と見なされてしまいます。

Nehan.setStyle(".foo:first-letter", {fontSize:"3em"}); // NG(未定義のpseudo-class)
Nehan.setStyle(".foo::first-letter", {fontSize:"3em"}); // OK!