[CSS]属性セレクタを使ったちょっと面白いスタイルシートのテクニックのまとめ

Post on:2012年7月3日

sponsors

属性セレクタを使って、デバッグ用に空のリンクを目立たせたり、外部リンクのみアイコンをつけたり、head内のscriptやstyleのデータを明示するなど、ちょっと面白いスタイルシートのテクニックを紹介します。

[ad#ad-2]

デモ表示に使用している「Jsfiddle」はResultのタブをクリックすると結果が表示されます。
対応ブラウザはモダンブラウザで、一部Webkit系（Chrome, Safari）のみです。

空のリンクを目立たせる

空のリンクのみ背景：レッド、カラー：ホワイト、サイズ：大で、目立たせます。

httpで始まる外部リンクのみ180度回転させます。
※回転はWebkit系のみ対応。

[ad#ad-2]

上のデモをベースに、外部リンクの後に小さい矢印のアイコンを与えます。
※画像がdataスキームになっていますが、通常の画像ファイルでも可です。

拡張子が「.png」のimg要素で配置した画像を裏返しにします。

img[src $= .png] {
  filter: invert(100%);
}

ちょっとだけ属性セレクタから離れます。
head内の要素（script, style, link）を目に見えるようにします。

head {
  display: block;
  border-bottom: 5px solid red;
}
script, style, link {
  display: block;
  white-space: pre;
  font-family: monospace;
}

これだけではデータの列挙になってしまうので、:before, :afterを使いフォーマットを整えます。