さすらいのWeb制作家、MAKOCHINがつづるブログサイト。
Web制作に関する知識を備忘録的に書いているだけのサイトです。
ほとんど自分で見るためだけに書いているような内容なので読みやすくはなっていませんが、Web制作のお役に立てれば幸いです。
ご興味のある方はどうぞ。

【CSS3】属性セレクタ

Pocket
LINEで送る

CSS3では、idやclass以外にも属性名、属性値を指定することにより該当する要素を装飾することができます。

例)input要素の属性を指定して装飾する場合。

【使用例(css)】

input [type="text"] {
  border-radius:8px;
  -moz-border-radius:8px;
  -webkit-border-radius:8px;
  border:1px solid #FF0000;
  }

input [type="email"] {
  border-radius:8px;
  -moz-border-radius:8px;
  -webkit-border-radius:8px;
  border:1px solid #00FF00;
  }

input [type="tel"] {
  border-radius:8px;
  -moz-border-radius:8px;
  -webkit-border-radius:8px;
  border:1px solid #0000FF;
  }

【使用例(html)】

<form id="testForm" name="testForm" action="">
  <p>名前:<input type="text" name="name" maxlength="5"></p>
  <p>メールアドレス:<input type="email" name="email"></p>
  <p>電話番号:<input type="tel" name="tel"></p>
  <p><button type="button">送信</button>
</form>

input属性を指定して装飾するための記述は以下のようになります。

要素名[属性名]{プロパティ:値;}
要素名[属性名=”属性値”]{プロパティ:値;}

属性値を省略する場合は、属性名があるもの全てに指定した装飾が適応されます。
上記以外にも、以下のように属性名で指定される属性の値が一定の条件に合う要素を装飾の対象に指定することが可能です。

要素[attr^=”val”]・・・属性名attrの値がvalで開始する要素
要素[attr $=”val”]・・・属性名attrの値がvalで終了する要素
要素[attr*=”val”]・・・属性名attrの値がvalを含む要素

【対応ブラウザ】
FireFox3.6以降、Opera9.5以降、Safari3以降、Mobile Safari3以降、Chrome4以降

カテゴリー:HP制作, css

コメントを残す

コメント内容