CSS おれおれ Advent Calendar 2012 – 11日目

追記 (2012-12-12) : パーマリンクのURL間違えました。pseudo classesじゃなくてpseudo elementsですね……。

CSSのセレクターで要素を検索してスタイルの設定先を指定しますが、実はセレクターには要素を探すだけでなく、作り出す機能もあります。

疑似要素といふもの

疑似要素というのですが、あるセレクターを元に、ドキュメントツリー（HTML）中に存在しない架空の要素を定義します。

:hover等の疑似クラスはコロン:で始まっていますが、疑似要素はコロン二つ::で始まります。

以下がCSS3で定義されている疑似要素の一覧です。

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

コロンがひとつの場合も

CSS 2.1の頃からあったのですが、当時は:first-lineのようにコロンひとつで表していました。

対応環境

MDN（「参考」参照）によると、IEは9以降なら大丈夫ですが、それ以前だと使えたり使えなかったりするようです。

  • ::first-line … IE 9+
  • ::first-letter … IE 9+
  • ::before … IE 9+
  • ::after … IE 9+
  • :first-line … IE 5.5+
  • :first-letter … IE 5.5+
  • :before … IE 8+
  • :after … IE 8+

モダンブラウザーでは全て対応しているとのこと。

最初の行 ::first-line

最初の行だけを選択します。どんな場面で嬉しいのかよくわからないけれど、英文だとこういうパターンがあるのかな？

.target::first-line {
  color: red;
}

この場合、まずは .targetに該当する要素を検索し、そのうち最初の行だけを仮の要素.target::first-lineで括ります。

仮想要素の生成

例えばこのようなHTMLがあったとします。

<p class="target">
  Humpty Dumpty sat on a wall.<br />
  Humpty Dumpty had a great fall.<br />
  All the king's horses and all the king's men<br />
  couldn't put Humpty together again.
</p>

この場合、以下のようにマークアップされているものとみなします。（ちょっと長いし記号も入ってますが、.target::first-lineがタグ名と考えてください。）

<p class="target">
  <.target::first-line>Humpty Dumpty sat on a wall.</.target::first-line><br />
  Humpty Dumpty had a great fall.<br />
  All the king's horses and all the king's men<br />
  couldn't put Humpty together again.
</p>

先頭の行”Humpty Dumpty sat on a wall.”だけが赤色文字になります。

折り返しでおわり

あくまで「最初の一行」だけが対象です。領域の右端に到達して折り返される場合（要は幅が短い場合）は、そこで区切られてしまいます。

先の例では”Humpty Dumpty sat on a wall.”が選択されていましたが、もしその半分しか領域の幅がなく、折り返されるとしたら、”Humpty Dumpty sat”までが選択される場合もあり得ます。

デモ

最初の文字 ::fitst-letter

最初の一文字目だけを選択します。ラテン語圏の文章で段落の先頭の文字だけ大きくなってるようなの、見た事ありますよね。

.target::first-letter {
  /* 回り込み */
  float: left;
  font-size: 3em;
  line-height: 1em;

  /* 強調表示 */
  font-style: oblique;
  font-weight: bold;
  margin-right: .3em;
}

記号は混ざる

例えば”I’m”で始まっている場合は、::first-letterの疑似要素は”I”ではなく”I'”で生成されます。

<p class="target">
  <.target::first-letter>I'</.target::first-letter>m starving.
</p>

デモ

前後 ::before, ::after

前後に空の要素を追加します。

あくまで空なので、文字列は含まれていません。

<p class="target">
  <.target::before></.target::before>
  Humpty Dumpty sat on a wall.<br />
  Humpty Dumpty had a great fall.<br />
  All the king's horses and all the king's men<br />
  couldn't put Humpty together again.
  <.target::after></.target::after>
</p>

内容 content

この二者はそのままだと空要素で生成されるが、内容に文字列を指定する事ができます。

専用プロパティのcontentを使います。

.target::before {
    content: "[BEFORE]";
}
.target::after {
    content: "[AFTER]";
}

文字列以外にも指定する事が出来ますが、今回は割愛します。

使いどころ

引用文の前後に引用符を付けるとか。

デモ

参考