Jun. 28th,2021
＃
クラス・セレクタ
“クラス・セレクタ(Class selectors)”はスタイルを適用する対象を要素のクラス名によって選択するためのセレクタです。
HTMLではクラス名は要素の“class”属性の値によって指定されます。
クラス・セレクタはドット(U+002E、“.”)に続いて記述されたクラス名です。
.〚クラス名〛 { ... }
<〚要素名〛 class="〚クラス名〛">
クラス名は有効なCSS識別子である必要があり、以下の決まりを満たさなければなりません。
- 英字(“a”~“z”と“A”~“Z”)、数字(“0”~“9”)、ダッシュ(U+002D、“-”)、アンダースコア(U+005F、“_”)、非ASCII文字(U+0080以降)、エスケープ文字の組み合わせです。
- 1文字目が数字であってはいけません。
- 1文字目がダッシュである場合は2文字目は数字であってはいけません。
- 引用符(“"”もしくは“'”)で囲ってはいけません。
クラス名はID名とは異なり、複数の要素に同じクラス名をつけることができます。クラス名は一つの要素に複数つけることができ、要素に複数のクラス名がつけられている場合は複数のクラス・セレクタによってその要素を選択することができます。
クラス名は英字の大文字と小文字が区別されます。ただし、文書が互換モードでレンダリングされる場合は大文字と小文字が区別されません。
＃
使用例
p.red {
background-color: #d396a6; /*■*/
font-weight: bold;
}
p.purple {
background-color: #be96d3; /*■*/
font-style: italic;
}
p.blue {
background-color: #27b6d3; /*■*/
text-decoration: underline wavy;
}
p.green {
background-color: #96d3c1; /*■*/
text-shadow: 5px 5px 3px;
}
<p class="red">
春は曙。やうやう白くなりゆく山際、すこしあかりて、紫だちたる雲の細くたなびきたる。
</p>
<p class="purple">
夏は夜。月のころはさらなり、闇もなほ、蛍の多く飛びちがひたる。また、ただ一つ二つなど、ほのかにうち光て行くもをかし。雨など降るもをかし。
</p>
<p class="blue">
秋は夕暮。夕日のさして山端いと近くなりたるに、烏の寝所へ行くとて、三つ四つ二つなど、飛び行くさへあはれなり。まして雁などのつらねたるが、いと小さく見ゆる、いとをかし。日入りはてて、風の音、蟲の音など。
</p>
<p class="green">
冬はつとめて。雪の降りたるは、いふべきにもあらず。霜などのいと白きも、またさらでも いと寒きに、火など急ぎおこして、炭持てわたるも、いとつきづきし。昼になりて、ぬるくゆるびもていけば、炭櫃・火桶の火も、白き灰がちになりぬるは わろし。
</p>
春は曙。やうやう白くなりゆく山際、すこしあかりて、紫だちたる雲の細くたなびきたる。
夏は夜。月のころはさらなり、闇もなほ、蛍の多く飛びちがひたる。また、ただ一つ二つなど、ほのかにうち光て行くもをかし。雨など降るもをかし。
秋は夕暮。夕日のさして山端いと近くなりたるに、烏の寝所へ行くとて、三つ四つ二つなど、飛び行くさへあはれなり。まして雁などのつらねたるが、いと小さく見ゆる、いとをかし。日入りはてて、風の音、蟲の音など。
冬はつとめて。雪の降りたるは、いふべきにもあらず。霜などのいと白きも、またさらでも いと寒きに、火など急ぎおこして、炭持てわたるも、いとつきづきし。昼になりて、ぬるくゆるびもていけば、炭櫃・火桶の火も、白き灰がちになりぬるは わろし。
＃
