HTML - CSS - セレクタ - 列挙して複数セレクタの指定ができる

 
1. 概要
2. 列挙して複数セレクタの指定ができる

1. 概要

 これは、目から鱗の話なのです。  本項は「CSS の複数クラスによる絞り込み - コンピュータクワガタ」を参考にさせていただきました。

2. 列挙して複数セレクタの指定ができる

 要は

.class1.class2
{
	プロパティ名: 値;
}
 という指定をして、class1 にも class2 にも同じ設定が可能であるということなのです。  さらにびっくりしたのが参考サイトの例題にあった

<span class="class1 class2">...</span>
 という、ひとつのタグに複数のクラスが指定できるのですって・・・。  つまり

span.class1 { text-decoration-line: underline; }
span.class2 { color: red; }
span.class1.class2 { border-color: yellow; }
 というスタイルを定義して

 <span class="class1">class1</span>
 <span class="class2">class2</span>
 <span class="class1 class2">class1 & class2</span>
 と .html に記述すると

 下記のような表示になるわけです。

 class1
 class2
 class1 & class2