CSS3の属性セレクタ

属性セレクタは、属性名や属性値によって、要素を指定する事ができます。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でここらへんが実装されないかしらっつう、淡い期待を持ってたりするのは無駄ですか?

この記事についての情報

似た内容の記事

この記事に対するトラックバック

トラックバックURL: http://www.lucky-bag.com/mt/mt-tb.cgi/227

ドブログ[Do-Blog] - 同窓(同一ページ内リンク) (2005年6月20日 15:57)

Firefoxの拡張機能「TargetAlert」というFirefoxの機能拡張... 続きを読む

Comments