属性セレクタで条件下の属性のスタイルを変える

HTML

属性セレクタ

セレクタの範囲に特定の属性や属性値を指定することも可能です。

素名[属性名]{プロパティ:値;}
要素名[属性名="属性値"]{プロパティ:値;}
セレクタ説明
要素[attr=”値”]attrの値がvalの要素
要素[attr^=”値”]attrの値がvalで始まる要素
要素[attr$=”値”]attrの値がvalで終わる要素
要素[attr*=”値”]attrの値がvalを含む

属性ごとにスタイルを適用する

フォームの属性ごとに別々のスタイルを割当ててみます。 URL入力ボックスには角ありの罫線を、検索ボックスには角丸罫線を指定します。


nput[type="url"]{
  border: solid 1px black;
}

input[type="search"]{
  border: solid 1px red;
}

部品ごとに別々のスタイルを適用できます。

実行結果

style-change-attribute01

属性値ごとにスタイルを適用する

サイト内リンクと外部リンクでa要素のスタイルを分ける場合を想定します。 この時a要素のhrefの値が”http”で始まる場合は外部リンクとしてスタイルを記述することができます。

lt;a href="post.HTML">サイト内リンク</a>
<a href="http://hogehoge.com">外部リンク</a>
<a href="https://www.google.co.jp/">Googleへのリンク</a>
{/*サイト内リンクのa要素*/
  color:blue;
}

a[href^="http"] {/*httpで始まる=外部リンク*/
  color:red;
}

a[href="https://www.google.co.jp/"] {/*Googleへのリンク*/
  color:green;
}

リンク先ごとに別々のスタイルが適用されます。

実行結果

style-change-attribute02
eyecatch

キャッシュマニフェストでキャッシュを指定する

eyecatch

見出し要素(h1~h6)の使い方

HTMLの記事

eyecatch

実体参照(記号・特殊文字)一覧

eyecatch

テーブル要素のマークアップ

eyecatch

リスト要素のマークアップ

eyecatch

HTML文書の記述ルールと作法

eyecatch

コンテンツモデルとコンテキスト

eyecatch

HTML文書の基本構成

HTMLの記事一覧HOME