:before 擬似要素 / :after 擬似要素の活用例 (2)

記事本文

:before 擬似要素 / :after 擬似要素の活用例に続き、また新たな活用例をご紹介。

今回は先にサンプルから出しますが、先日 hxxk.jp template set -standard- で紹介したテンプレートセットのサンプルである Template hxxks -standard- にその例を使用しています。 :before 擬似要素に対応しているブラウザであれば、各セクションを表す div 要素の id 属性が表示されているのがお分かりでしょうか。

div[id]:before{
  content:   "div#"attr(id)"";
  display:     block;
  color:       #ccc;
  background:  transparent;
  font-size:   2em;
  font-family: Impact,sans-serif;
  }

このように、属性セレクタを使用して id 属性が指定されている div 要素にのみスタイルを適用するようにして、その id 属性の値を表示するようにしています。 どちらかというと、 HTML の構造を決める時にデバッグ的に使う時に役立つかもしれません。 また、 id 属性よりも class 属性をよく使うという人は、 CSS の記述中の id を class に変更するといいかもしれません。