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