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

属性セレクタを使って、デバッグ用に空のリンクを目立たせたり、外部リンクのみアイコンをつけたり、head内のscriptやstyleのデータを明示するなど、ちょっと面白いスタイルシートのテクニックを紹介します。 The amazing powers of CSS [ad#ad-2] 空のリンクを目立たせる 外部リンクを目立たせる 外部リンクのみアイコンを付与する PNG画像を裏返しにする head内の要素を可視化 デモ表示に使用している「Jsfiddle」はResultのタブをクリックすると結果が表示されます。 対応ブラウザはモダンブラウザで、一部Webkit系（Chrome, Safari）のみです。 空のリンクを目立たせる 空のリンクのみ背景：レッド、カラー：ホワイト、サイズ：大で、目立たせます。 外部リンクを目立たせる httpで始まる外部リンクのみ180度回転させます。 ※回転はWe

[thujikun]

CSSを開発の補助に使うテクニック。今までこの発想はなかった。

[asterisknautz]

メモ クイックポスト

[tkm_shohei]

外部リンクのみアイコンを付与する　とか普通に実務レベルで使えそう。早速試す。

[glat_design]

へー…headってdisplay:block出来るんだ…知らなかった…へー…

[Donca]

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