クラスセレクター

.class_name {
  /* … */
}

[class~="class_name"] {
  /* … */
}

<p class="red">この段落は赤い文字です。</p>
<p class="red yellow-bg">
  この段落は赤い文字で、黄色の背景です。
</p>
<p class="red fancy">この段落は赤い文字で、"fancy" スタイルです。</p>
<p>これは単なる通常の段落です。</p>

<!-- 次の 2 つの段落には、CSS でエスケープしなければならない文字を含む
クラス属性が設定されています -->

<p class="item?one">この段落はピンクの背景です。</p>
<p class="123item">この段落は黄色の背景です。</p>

.red {
  color: #ff3333;
}

.yellow-bg {
  background: #ffffaa;
}

.fancy {
  font-weight: bold;
  text-shadow: 4px 4px 3px #7777ff;
}

/* 次の 2 つのルールでは、クラス属性はエスケープしなければならない */

.item\?one {
  background-color: pink;
}

.\00003123item {
  background-color: yellow;
}

.item?one {
  background-color: green;
}

.123item {
  background-color: green;
}