個別記事

前後の記事

CSS3の属性セレクタ

この記事が属するカテゴリー
CSS

属性セレクタは、属性名や属性値によって、要素を指定する事ができます。Gecko系などのブラウザは、CSS3の属性セレクタなどに対応しています。どういった指定が出来るのか、覚え書きとしてメモ。サンプルとして、下記の(X)HTMLを想定します。

<a href="/" title="Lucky bag::blogのトップへ">トップ</a>

一番単純なのが、属性名を指定する方法です。下記は、 title 属性を持つ全ての a 要素に1pxのドットで下線を表示することができます。

a[title]{
        border-bottom: 1px dotted #666666;
}

次は、 title 属性の値が「Lucky bag::blogのトップへ」の場合のみ、指定する方法。

a[title="Lucky bag::blogのトップへ"]{
        border-bottom: 1px dotted #666666;
}

次からCSS3での指定方法。 title 属性の値が「Lucky」で始まる場合のみ、指定する方法。

a[title^="Lucky"]{
        border-bottom: 1px dotted #666666;
}

次は、 title 属性の値が「トップへ」で終わる場合のみ、指定する方法。

a[title$="トップへ"]{
        border-bottom: 1px dotted #666666;
}

次は、title属性の値内に「bag」が含まれる場合のみ、指定する方法。

a[title*="bag"]{
        border-bottom: 1px dotted #666666;
}

次期IE7でここらへんが実装されないかしらっつう、淡い期待を持ってたりするのは無駄ですか？

2005-02-22T17:08:19+09:00 | コメント (0) | トラックバック (1) |はてなブックマーク

関連性が高いエントリー 5 件

トラックバック

このエントリーのトラックバックURL:
http://WWW.lucky-bag.com/cgi/mt/mt-tb.cgi/161

このリストは、次のエントリーを参照しています: CSS3の属性セレクタ:

ドブログ[Do-Blog] さんからのトラックバック
同窓（同一ページ内リンク）
Firefoxの拡張機能「TargetAlert」というFirefoxの機能拡張... [続きを読む]
2005年06月20日 15:57

コメント

"CSS3の属性セレクタ"へのコメントはまだありません。

コメントしてください

コメント内ではタグは一切使えません。コメント内にてタグを表記したい場合は、お手数ですが、文字実体参照を利用して < を &lt; 、> を &gt; とそれぞれ置き換えてください。




保存しますか?


(V) (P)