11

初めまして。css初心者なのですが、学習をしていく中で記法でわからない部分が出たのでご質問させていただきます。

例えばなのですが、

<p class="abc">こんにちは</p>

というHTMLに対し、

p[class="abc"] { color: blueviolet; }

p.abc { color: blueviolet; }

このどちらのcssも"こんにちは"という文字を紫色で表示してくれると思うのですが、この二つの記法に関して何か違いなどはあるのでしょうか?
「こっちを使用して書いた方が良い」や、「この二つの意味の違い」などがあれば教えていただけると幸いです。

よろしくお願いします。

Shintaro
  • 446
  • 4
  • 16
Shi-tama
  • 123
  • 8
  • 2
    classの場合には.を使って書くのが普通でしょう。class以外の属性だったら[]を使って書くしかないと思います。例えばのtypeならinput[type="xxx"]で指定するしかないでしょう。 – Kenji Noguchi Jul 28 '15 at 06:21
  • 納得することができました!コメントありがとうございました。 – Shi-tama Jul 28 '15 at 06:40

1 Answers1

12

class属性はスペース区切りで列挙できます。つまり

<p class="abc def">こんにちは</p>

であってもp.abcにマッチします。しかしp[class="abc"]にはマッチしません。p[class~="abc"]だとマッチします。

sayuri
  • 42,863
  • 1
  • 33
  • 94
  • class属性を列挙した際に違いが出てくるのですね。理解することができました。ありがとうございました。 – Shi-tama Jul 28 '15 at 06:44