11

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

例えばなのですが、

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

というHTMLに対し、

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

p.abc { color: blueviolet; }

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

よろしくお願いします。

2
  • 2
    classの場合には.を使って書くのが普通でしょう。class以外の属性だったら[]を使って書くしかないと思います。例えば<input type="xxx">のtypeならinput[type="xxx"]で指定するしかないでしょう。 Commented 2015年7月28日 6:21
  • 納得することができました!コメントありがとうございました。
    – Shi-tama
    Commented 2015年7月28日 6:40

1 件の回答 1

12

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

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

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

1
  • class属性を列挙した際に違いが出てくるのですね。理解することができました。ありがとうございました。
    – Shi-tama
    Commented 2015年7月28日 6:44

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。