CSS3で該当するクラス名にスタイルを反映させる方法

CSS3ではクラス名の部分一致でスタイルを反映させることができるようになっていました！ Ardor(@ArdorOnline)です。 スタイルシートに記述するクラス名は、似たような意味を持つ場合は共通の単語を使ってコーディングすることが多いです。 共通の単語を使ったクラス名に、一括してスタイルを反映させる方法が、CSS3から可能になっていました。 簡単にご紹介します。

クラス名の部分一致

スタイルを指定する際には、class="クラス名" のようにします。
例えば、次のようなクラス名があるとします。
すべてに共通するクラス名は"post"です。

class="post-header"
class="post-body"
class="post-footer"

このクラスすべてに反映させたいスタイルがあったらどうしますか？
"post"という名前に対してスタイルを適用する方法があります。
名前の部分一致の方法は、次の指定方法があります。

指定方法	説明	サンプル
[att^="post"]	属性attの値が「post」で始まる場合に適用。	[class^="post"] {  color: white; }
[att$="post"]	属性attの値が「post」で終わる場合に適用。	[class$="post"] {  color: white; }
[att*="post"]	属性attの値の一部に「post」が含まれる場合に適用。	[class*="post"] {  color: white; }

この様な指定方法を利用すると、"post"という単語を含む箇所に、スタイルを指定できます。

スタイルの記述

次のようなスタイル設定を行ってみます。

[class*="sample"] {
 font-weight: bold;
}
[class^="start"] {
 color: blue;
}
[class$="end"] {
 text-decoration: underline;
}

サンプル

サンプルは次の通りです。

指定したクラスは、sample です。(太字)

指定したクラスは、start-sample です。(太字、青)

指定したクラスは、start です。(青)

指定したクラスは、sample-end です。(太字、下線)

指定したクラスは、end です。(下線)

クラス名に"sample"が含まれる箇所は、すべて太字が反映されます。

クラス名が"start"で始まっていると、青が反映されます。

クラス名が"end"で終わっていると、下線が反映されます。

最後に

CSS3から採用された方法を使えば、面倒だったクラスの整理も楽になりそうですね！
また、便利そうな使い方を見つけたらご紹介してみようと思います。

最後までお読み頂き、ありがとうございます。