属性セレクタ

!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <style>
        input[type="text"] {
            background-color:#ff0000;
        }
        input[type*="pa"] {
            background-color:#0000ff;
        }
    </style>
</head>
<body>
<form action="#" method="post">
    <table>
        <tr>
            <td>name:</td>
            <td><input type="text" name="name" size="20" maxlength="10"></td>
        </tr>
        <tr>
            <td>password:</td>
            <td><input type="password" name="pass" size="10" maxlength="6"></td>
        </tr>
    </table>
</form>
</body>
</html>
  • 要素:<input type="text" ...>
  • 属性:type
  • セレクタinput[type="text"](スタイルを適用する対象)

input[type="text"]が完全一致するものの背景を赤にし、input[type*="pa"]で、ワイルドカードを指定しpaがつくinput typeをすべて青にしています。

f:id:hrt0kmt:20140714211321p:plain

div[width] {
    height: auto; // div要素でwidthの属性を持つ要素のheightをautoにします。
}

p[class="foo"] {
    color: red; // p要素でclass="foo"の属性を持つ要素のcolorをredにします。
}

h1[class~="memo"] {
    color: yellow; // h1要素でclass名にmemoがつく要素のcolorをyellowにします。
}