知っていると便利！複数のCSSを同じタグに適用する

1つのタグに複数のスタイルを適用したい場合の記述と、知っておくと重宝する応用編を忘備録を兼ねて書いていきたいと思います。

PR

セレクタとは

スタイルシート(以下CSS)に記述するタグ、id、classを指します。

例)※赤字がセレクタ
h1 {color:red;}
#test p {color:blue;}
p.yellow {color:yellow;}

同じHTMLタグに複数のセレクタを指定したい場合

※下記のようなケースでは同じセレクタ(.box)に対して背景色を指定したほうがいいので、あくまで例として考えて下さい。

【CSS】

.box{
     border:solid 1px #000;
}

.bk_gray{
     background-color:#CCC;
}

【HTML】

<div class="box bk_gray">
     <p>div要素に線(黒)を引いて背景の色をグレーにします。</p>
</div>

このように同じタグに複数クラスを指定することで、「box」「bk_gray」それぞれのスタイルが有効になります。

【サンプル】

スタイルがかぶっている場合

【CSS】

.box{
     border:solid 1px #000;
}

.border_red{
     border:solid 1px #ff0000;
}

【HTML】

<div class="box border_red">
     <p>div要素に「.box」のスタイルが適用されていますが、「.border_red」で同じスタイルが適用されているため、線(灰色)が適用されます。</p>
</div>

各クラスで同じスタイル要素が指定されている場合、読み込み順が後のスタイルが有効になります。
上の例だと「.border_silverのborder:solid 1px #ff0000;が優先されます。

【サンプル】

セレクタ内の特定のスタイルのみを変更したい場合

【CSS】

.box2{
     display:block;
     width:80%;
     margin:auto;
}

.box2.border_red{
     border:solid 1px #ff0000;
}

.box2.border_blue{
     border:solid 1px #0000FF;
}

【HTML】

<div class="box2 border_red">
     <p>ブロック要素を横幅80%で表示し、真ん中寄せします。</p>
     <p>線の色は赤色です</p>
</div>

<div class="box2 border_blue">
     <p>ブロック要素を横幅80%で表示し、真ん中寄せします。</p>
     <p>線の色は青色です</p>
</div>

【サンプル】

特定id,classのある要素だけスタイルを変更したい場合、ほとんどのスタイルが同じなのに、セレクタを新規に作って特定のスタイルだけを変更しなくてもいいため、CSSの記述量が短縮できる上にソースも綺麗になるので、憶えておくととても重宝します。