ある属性が特定の値を持つ要素にのみスタイルシート(CSS)用する

セレクタ[属性=”値”] { プロパティ:値 ; …}

CSS/HTMLの書き方

CSS
セレクタ[属性=”値”] { プロパティ:値 ; プロパティ:値 ; …}

CSSの詳細情報
対応ブラウザ Windows MAC
FF1.0/NS7.1/OP8.0 SF
CSSレベル CSSレベル2

解説

HTMLの要素には、さらに詳細な設定が出来る属性を持つ要素もあります。

これらの属性がある値を取るときにのみ適用されるCSSです。

例えば、Aリンクタグにはリンク先のページの表示方法を指定する「target」がありますが、このtarget属性にある値が記述されているA要素にだけスタイルシートを適用することができます。

書き方としてはセレクタに要素名を、[ ]にはその要素の対象となる属性と値を記入します。

なお、この書き方はInternetExplorer5.0/5.5/6.0には対応していません。

CSS/HTMLサンプル

a[target=”_blank”] { text-decoration:none; border-bottom:1px dashed #0000ff; }

新規ウィンドウを開いて表示するリンクの下線を破線にする サンプル

【厳選】合わせて読みたいおすすめ書籍

WEB制作支援サイトのHTMLタグボードだからオススメできる厳選書籍です。私が読んでいない本はオススメしません。

HTMLやCSS、Webデザインを体系的に学ぶなら

CSSを駆使したモダンなWebデザインを学ぶなら

最新情報をチェックしよう!