ホームページマスターTOPページへ
初心者の為のホームページ作成支援サイト powerd by Google
HOME >複数のセレクタで指定

複数のセレクタで指定

複数のセレクタでCSSを指定することができます。

■ 複数のセレクタをカンマで区切ってCSSを指定する

複数のセレクタをカンマで区切って同じスタイルを適用させることができます。 下の例は<p>〜</p>、<div>〜</div>、<span>〜</span>内の 文字を赤色に適用させるように指定しています。1番目の外部ファイルは1行だけの記述ですが 2番目の外部ファイルの3行の記述と同じ効果があります。

外部ファイル

p,div,span{color:red;}


HTMLソース

<p>pタグ内のこの文章は赤色になります。</p>
<div>divタグ内のこの文章も赤色になります。</div>
<span>spanタグ内のこの文章も赤色になります。</span>


外部ファイル(3行にわたって記述した場合)

p{color:red;}
div{color:red;}
span{color:red;}

■ 要素名+クラス名をカンマで区切ってCSSを指定する

要素名+クラス名をカンマで区切って同じスタイルを適用させることもできます。 前項のように3行の記述が1行分の記述だけで済みます。

外部ファイル

p.sample1,div.sample2,span.sample3{color:red;}


HTMLソース

<p class="sample1">このpタグ内のこの文章は赤色になります。</p>
<div class="sample2">この文章も赤色になります。</div>
<span class="sample3">この文章も赤色になります。</span>

■ 複数のセレクタを半角スペースで区切ってCSSを指定する

複数のセレクタを半角スペースで区切って親要素内の子要素に対し スタイルを適用させることができます。

外部ファイル

div span{color:red;}


HTMLソース

<div>
<span>divタグ内のspanタグで囲まれた文章だけ赤色になります。</span>
<span>この文章も赤色になります。</span>
<span>この文章も赤色になります。</span>
</div>

■ 要素名+クラス名を半角スペースで区切ってCSSを指定する

要素名+クラス名を半角スペースで区切ってクラス名を使用した 親要素内のクラス名を使用した子要素に対し スタイルを適用させることができます。

下の例では
外部ファイルの1行目・・・<div class="oya">〜</div>内の文字は フォントサイズ12pxになります。
外部ファイルの2行目・・・<p class="kodomo">〜</p>の文章の行間は 1.5の高さになります。
外部ファイルの3行目・・・1行目のCSSに2行目のCSSを包括しているので フォントサイズ12pxかつ文章の行間1.5で尚且つ文字が赤色になります。

外部ファイル

div.oya{font-size:12px;}
p.kodomo{line-height:1.5;}
div.oya p.kodomo{color:red;}


HTMLソース

<div class="oya">
<p class="kodomo">
このdivタグ内のこのクラス名で囲まれた文章だけ赤色になります。
</p>
<p class="kodomo">この文章も赤色になります。</p>
<p class="kodomo">この文章も赤色になります。</p>
</div>

■ 全称セレクタ

全称セレクタで全てのセレクタにCSSを適用することができます。 セレクタの前にアスタリスク∗を記述します。

外部ファイル

∗{
font-size:12px;
margin:0px;
width:200px;
}


HTMLソース

<div>このdivタグ内の文字はフォントサイズ12pxになります。</div>
<p>このpタグ内の文字もフォントサイズ12pxになります。</p>
<h3>このh3タグ内の文章の上下の余白は0になります。</h3>
<hr>
hrタグで引かれた水平線は全て横幅200pxの長さになります。

■ その他の項目

スタイルシートの記述方法
スタイルシートの記述場所
個別にCSSを指定する
@importでCSSファイルを読み込む
外部ファイルのコメント

スタイルシート一覧のページに行く


HOME

Copyright (C) 2003-2012 ホームページマスター All rights reserved.