HTMLタグ/CSS一覧と初心者向けホームページ作成解説集:HTMLタグボード

HTMLタグボードのトップへ戻る ゼロから始めるホームページ作成講座 訪問者優位のWEBデザインTips インターネットで小遣い稼ぎ 今すぐ使える!便利ツール(HTMLタグ辞典など)


HTMLタグボードトップ >> 今すぐ使える!便利ツール >> スタイルシート(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; }

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

次のページへ >>