TIL

Today I Learned. 知ったこと、学んだことを書いていく

属性セレクタ - CSS

CSS

属性や属性の値によって、要素を選択できるセレクタ。タイプセレクタやclassセレクタでは指定しにくい要素の場合に使う。

以下の4つの要素を指定できる。

  • 属性が値のとき
  • 属性が追加されているとき
  • 属性が値で始まるとき
  • 属性が値で終わるとき

属性が値のとき

書式：[属性="値"]

例)aタグのtarget属性の値が"_blank"の要素を選択したい場合

a[target="_blank"]

属性が追加されているとき

書式：[属性]

例)チェックボックスにチェックがついている要素を選択したい場合

[checked]

※ 以下のソースで試してみたところ、うまく動かなかった

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>属性セレクタのテスト</title>
    <style>
        input {
            color: red;
        }
    </style>
</head>
<body>
    <h1>色の選択</h1>
    <p>
        <input type="checkbox" id="red" name="red" checked><label for="red">赤</label>
        <input type="checkbox" id="blue" name="blue"><label for="blue">青</label>
    </p>
</body>
</html>

属性が値で始まるとき

書式：[属性^="値"]

例)aタグのhref属性の値が"https"で始まっている要素を選択したい場合

a[href^="https"]

属性が値で終わるとき

書式：[属性$="値"]

例)imgタグのsrc属性の値が".png"で終わっている要素を選択したい場合

img[src$=".png"]

参考文献

いちばんよくわかるHTML5&CSS3デザインきちんと入門 (Design&IDEA)

いちばんよくわかるHTML5&CSS3デザインきちんと入門 (Design&IDEA)