CSS3 セレクタ でリンクのタイプ別にアイコンを付ける
＊Firefox1.5で見てください。IEとは違う見え方になります(どこかが)
CSSというとタグごとにclassを設定して、そのclassごとに文字色やボーダー、マージなどのスタイルを記述していくものだと思ってました。
alexander kirk
このサイトをFirefox1.5で訪れてみてビックリ、CSSだけでリンクのタイプ別にアイコンを付けているじゃないですか！(IEで訪れてみるともっとビックリしますよ。CSS3はIEでは対応していませんので、表示がめちゃくちゃ。ここまでIEを無視するのもすごいですよね)
この機能、どうやら昨年の12月に最終草案に入ったCSS3 セレクタを使っているようです。条件にマッチしたタグに対してスタイルを適用することができるなんてしりませんでした。
実は、このセレクタ、CSS1のころからあったようで[a:active]なんてのもセレクタの一種だったようです^^;
CSS2→CSS3とバージョンを重ねるたびにセレクタが充実してきて、属性の値の部分マッチングなんかもできるようになったようです。
こんな感じで部分マッチを指定できるようです。
a[href^="http://technorati.jp"] { background: url('http://technorati.com/pix/icn-talkbubble.gif') center left no-repeat; padding-left: 14px; }
セレクタについての詳細な解説は先輩諸氏にお譲りして^^;
我的春秋 CSS 3 セレクタ最終草案リリース や
W3C CSS3 Selectors
W3C CSS2 Selectors が大変参考になりました。
私の場合は、このブログをFirefox1.5とIEで比較してみていただくということで済ませたいと思います。
セレクタが充実してくると、class や id をタグ内に埋め込む割合が激減するので、何とか頑張って IE 7 にも実装してもらいたいところです。
我的春秋
激しく同意します。IE7対応してくだされ〜。
){kind=link}