<div>class無し</div>
<div class="example">class有り</div>

div[class] {
	color: red;
}

指定の属性が付加されているものに装飾を適用します。
上記のようにHTMLとCSSを記述したとき、class属性があるpタグのみ装飾が適用されます。

<div>class無し</div>
<div class="red">class有り red</div>
<div class="blue">class有り blue</div>

div[class="red"] {
	color: red;
}

指定の属性が指定の属性値を持っている要素にのみ装飾が付加されます。
上記のようにHTMLとCSSを記述したとき、class属性があるdivタグの中でも、redの属性値を持った要素のみ装飾が適用されます。

<div>class無し</div>
<div class="red">class有り red</div>
<div class="blue">class有り blue</div>
<div class="red blue">class有り red blue</div>

div[class~="red"] {
	color: red;
}

=（イコール）の前に~（チルダ）を記述すると、指定の属性が指定の属性値を含んでいる要素に装飾が付加されます。
たとえば上記のように、classの属性値が二つ指定されている場合でも、redの属性値を含んでいればその要素に装飾が適用されます。

<div>class無し</div>
<div class="red001">class有り red001</div>
<div class="red002">class有り red002</div>
<div class="red003">class有り red003</div>

div[class^="red"] {
	color: red;
}

=（イコール）の前に^（キャレット）を記述すると、指定の文字列から始まる属性値を持っている要素に装飾が付加されます。
たとえば上記のように記述したときは、classの属性値がredから始まる要素であれば装飾が適用されます。

<div>class無し</div>
<div class="red001">class有り red001</div>
<div class="red002">class有り red002</div>
<div class="red003">class有り red003</div>

div[class$="001"] {
	color: red;
}

=（イコール）の前に$（ドル）を記述すると、指定の文字列で終わる属性値を持っている要素に装飾が付加されます。
たとえば上記のように記述したときは、classの属性値が001で終わる要素であれば装飾が適用されます。

<div>class無し</div>
<div class="red001">class有り red001</div>
<div class="red002">class有り red002</div>
<div class="red003">class有り red003</div>
<div class="red010">class有り red010</div>

div[class*="00"] {
	color: red;
}

=（イコール）の前に*（アスタリスク）を記述すると、指定の文字列を含む属性値を持っている要素に装飾が付加されます。
たとえば上記のように記述したときは、classの属性値に00の文字列がある要素であれば装飾が適用されますので、一桁の番号だけといった指定が可能となります。