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

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

サイトのキャプチャ

The amazing powers of CSS

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

空のリンクを目立たせる

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

外部リンクを目立たせる

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

外部リンクのみアイコンを付与する

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

PNG画像を裏返しにする

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

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

head内の要素を可視化

ちょっとだけ属性セレクタから離れます。
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を使いフォーマットを整えます。

top of page

©2017 coliss