CSS3擬似クラスの中の擬似クラス

あまり解説されている記事がなかったのでメモ
CSS3で新たに追加された要素「:first-letter」で雑誌風に先頭文字を装飾（ドロップキャップ）する

p:first-letter {
  font-size: 32px;
  font-weight: bold;
  line-height: 24px;
  padding: 10px;
  background-color: greenyellow;
  float: left;
}

これで装飾することは出来たが記事の中でｐ要素が一つで終わる事がまずないのでこのままだとｐタグごとに先頭の文字が装飾されてしまう。
解決策として擬似クラスの中の擬似クラスを指定してみる

p:first-child:first-letter {
  font-size: 32px;
  font-weight: bold;
  line-height: 24px;
  padding: 10px;
  background-color: greenyellow;
  float: left;
}

一応現状の最新版のchrome,Firefox,safari,IEで問題なく表示される。これで記事本文の最初のｐ要素の最初の文字にだけスタイルを指定できる。「nth-child(n)」でも可能なのでp要素の中にspanを多用せずにスタイルを適応できるので「:nth-child(n):before」とかある程度使い道がありそう。
first-childはCSS2でもあった要素なので古いIEでも問題なく表示されるが、nth-childを使うとIE9以前のバージョンは表示不可なので無難にjQueryで実装するべきかも。