CSSのスタイルで、クラス間での継承・オーバーライドを行うことができる。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
.main { font-size: 2em; color: #00f; } .main.sub1 { color: #f00; } .main.sub2 { font-size: 1.5em; } .sub1 { color: #0f0; } 上記の例では、mainクラスでフォントサイズ <!-- box-sizing属性の例示用style／本ページ専用 --> |
上記の例では、mainクラスでフォントサイズとカラーを指定し、sub1クラスではmainクラスのフォントサイズを継承しながらカラーを、sub2クラスではmainクラスのカラーを継承しながらフォントサイズをオーバーライドしている。
また、mainを継承したsub1クラスとは別に、単独でsub1クラスのスタイルを定義している。
これらのスタイルをHTMLで利用する場合、複数クラスをスペースで区切って指定する。その際、クラスの順番は問わない。
|
1 2 3 4 5 6 7 8 9 10 |
<div class="main">.mainのスタイル</div> <div class="main sub1">.main.sub1のスタイル</div> <div class="sub1 main">.main.sub1のスタイル</div> <div class="main sub2">.main.sub2のスタイル</div> <div class="sub2 main">.main.sub2のスタイル</div> <div class="sub1">sub1のスタイル</div> <div class="sub2">sub2のスタイル</div> |
実行結果は以下の通り。
.mainのスタイル
.main.sub1のスタイル
.main.sub1のスタイル
.main.sub2のスタイル
.main.sub2のスタイル
sub1のスタイル
sub2のスタイル
- 複数クラスの記載順序は影響しないことに注意。
- 同名のクラスでも単独で定義されたsub1クラスとサブクラスとして定義されたsub1クラスは異なる
- サブクラスとして定義されたsub2クラスは単独では適用できない