タグを入れ子にして同じクラス/ID名を使い分ける

ブログでは、ページ全体の構成は自動生成なので、サイトのカスタマイズは主にスタイルシートを変更することになります。

デフォルトのCSSでも、見慣れないうちはその長さに面食らいますが、さらにさまざまな場面で文字の大きさや色、表示位置などを好みに合わせようとすると、IDやCLASSの指定も思いがけなく増えて、名前も長くなりがちです。

そんなときには、IDやクラスに親子関係を持たせて管理するのが便利です。
親子関係に当たるCLASSのスタイルシートの記述は 次のようになります。

.親のクラス名 .子のクラス名 { スタイル }
(注)親も子も、.（ドット）の部分は、IDであれば#（半角シャープ）です。

親のクラス（またはID）と子のクラス（またはID）の間には、半角スペースを入れてください。
使用例です。

 

 

下記のソースを表示させると、次のようになります。inner_a と inner_b という同じ名前の CLASS が出現しますが、sampleblock_1 と samplebloack_2という別々のブロックタグの中に入れ子になっているため、それぞれ別のスタイルが適用されています。

サンプルブロック１内のA
サンプルブロック１内のB
サンプルブロック１内のB
サンプルブロック２内のA
サンプルブロック２内のB
サンプルブロック２内のB
Code:
<style type="text/css">
<!--
.sampleblock_1 {

width:150px;border:2px solid red;
background-color:white;
}

.sampleblock_1 .inner_a {

background-color:red;
color:yellow;padding:0 5px;
}

.sampleblock_1 .inner_b {

color:red;padding:0 5px;
}

.sampleblock_2 {

margin-top:10px;width:200px;
border:2px solid blue;
background-color:white;
}

.sampleblock_2 .inner_a {

background-color:blue;
color:aqua;padding:0 5px;
}

.sampleblock_2 .inner_b {

color:blue;padding:0 5px;
}

-->
</style>

<div class="sampleblock_1">

<div class="inner_a">サンプルブロック１内のA</div>
<div class="inner_b">サンプルブロック１内のB
<br>サンプルブロック１内のB</div>
</div>
<div class="sampleblock_2">

<div class="inner_a">サンプルブロック２内のA</div>
<div class="inner_b">サンプルブロック２内のB
<br>サンプルブロック２内のB</div>
</div>