pastel というクラス名を持つE要素に対してスタイルが適用されます。

クラス名（クラス型属性値）はピリオド " . " のすぐ後に記述します。 この " .クラス名 " のようなセレクタをクラスセレクタと言います。 クラス名は、一つの文書内で何度でも使えます。また一つの要素に複数指定することもできます。

クラス属性を表すときに ˜= の代替として終止符として知られている （ピリオド）の表記を使用しています。 div.pastel と div[class˜=pastel] は同じ意味になります。

class˜="pastel" をもつ全ての要素への指定は、以下のように書きます。

example

*.pastel { color: #ff1493; }
 .pastel { color: #ff1493; } 

source

<h1 class="pastel"> h1 要素 </h4>
<div class="pastel"> div 要素 </div>
<p class="pastel"> p 要素 </p>
<span class="pastel"> span 要素 </span>

display

class˜="pastel" をもつ H1 要素への指定は、以下のように書きます。

example

h1.pastel { color: deeppink; }

source

<h1> クラス属性なし </h1>
<h1 class="pastel"> クラス属性あり </h1>

display

次は、空白で区切られた aaa と ccc の両方の属性値をもつ P 要素全てににマッチします。

example

p.aaa.ccc { color: deepskyblue; }

source

<p class="aaa bbb ddd"> aaa しかありません </p>
<p class="aaa bbb ccc ddd"> aaa と ccc 両方あります </p>

display