CSSにおける指定されたクラスを持つタグ
同じクラスを持つ2種類のタグがあるとします。
例えば、見出しタグh2と段落タグの両方が同じクラスを持っている場合:
<h2 class="eee">Title</h2>
<p class="eee">
text
</p>
<h2 class="eee">Title</h2>
<p class="eee">
text
</p>
例えば、そのクラスを持つすべての要素を赤色にすることができます:
.eee {
color: red;
}
しかし、特定のクラスを持つタグを対象にすることもできます。
例えば、クラスeeeを持つすべてのh2を選択し、
クラスeeeを持つすべてのpを別々に選択できます。
そのためには、セレクタにタグ名を書き、続けてクラス名を続けます。
例えば、このクラスを持つh2を赤色に、
同じクラスを持つ段落を緑色にしてみましょう:
h2.eee {
color: red;
}
p.eee {
color: green;
}
次のコードがあります:
<h2 class="header">text</h2>
<h2 class="header">text</h2>
<h3 class="header">text</h3>
<h3 class="header">text</h3>
.header {
color: red;
}
クラスheaderを持つすべてのh2を
40pxのサイズに、同じクラスを持つすべてのh3を
30pxのサイズにしてください。