セレクタ(selector)の記述パターン


特定の要素を指定

要素{プロパティ: 値;}

p要素、div要素、span要素など、要素名で指定すると指定された要素にスタイルが適用されます。

例)

p {
color: #ff0000;
}

本文)
<p>テキストAAAaaa</p>

上記のHTMLドキュメント


要素のグルーピング

要素1,要素2,要素3,{プロパティ: 値;}

要素をカンマ( , )で区切り複数の要素にスタイルを適用します。

例)

h1,h2{
font-size: 12px;
color : red;
margin: 0px;
}

本文)
<h1>テキストAAAaaa</h1>
<h2>テキストBBBbbb</h2>

上記のHTMLドキュメント


要素内に含まれる特定の要素を指定


親要素 子、孫要素{プロパティ: 値;}

親要素に半角スペースで区切り、子、孫要素名で指定すると親要素内の子、孫要素にスタイルが適用されます。

例)

em{
color: blue;
}
p em{
color: red;
}

本文)
<em>テキストAAAaaa</em>
<p>テキスト<em>BBB</em>bbb</p>
<div>テキスト<em>CCC</em>ccc</div>

上記のHTMLドキュメント

上記の例ではem要素に青色を指定していますが、親要素としてセレクタの指定のあるp要素のem要素は赤色で表示されます。一方、親要素としてセレクタの指定のないdiv要素のem要素は青色で表示されています。


親要素>子要素{プロパティ: 値;}

親要素に続けて大なり記号(>) 子要素でセレクタを指定すると特定の親要素の子要素のみスタイルが適用されます。※Internet Explorerはver7以降で対応。

例)

p>em{
color: red;
}

本文)
<div>テキスト<em>AAA</em>aaa</div>
<p>テキスト<em>BBB</em>bbb</p>

上記のHTMLドキュメント

親要素としてセレクタとして指定のあるp要素のem要素のみスタイルが適用され、親要素として指定のないdiv要素のem要素には適用されません。


要素A+要素B{プロパティ: 値;}

要素をプラス記号(+)で区切りセレクタを指定すると、要素Aの直後に指定された要素Bのみスタイルが適用されます。※Internet Explorerはver7以降で対応。

例)

h1+h2{
color: red;
}

本文)
<h1>テキストAAAaaa</h1>
<h2>テキストBBBbbb</h2>
<h2>テキストCCCccc</h2>

上記のHTMLドキュメント

すべての要素に指定

*{プロパティ: 値;}

セレクタにアスタリスク(*)を指定するとすべての要素にスタイルが適用されます。

例)
*{
margin: 0px;
padding :0px;
}

特定の要素のすべての要素に指定

要素 *{プロパティ: 値;}

要素の後ろに半角スペースで区切りアスタリスク(*)を指定するとセレクタに指定した要素内すべての要素にスタイルが適用されます。

例)

p *{
color: red;
}

本文)
<div><strong>テキスト</strong><em>AAA</em><span>aaa</span></div>
<p><strong>テキスト</strong><em>BBB</em><span>bbb</span></p>

上記のHTMLドキュメント


idを指定

#id名{プロパティ: 値;}

要素#id名{プロパティ: 値;}

シャープ(#)に続けて任意のid名つけセレクタを指定するとid="任意のid名"と指定した要素にスタイルが適用されます。シャープ(#)の前に要素を限定して記述した場合は、指定した要素以外の要素にid="任意のid名"を指定してもスタイルが適用されませんのでご注意下さい。また、1つのHTML文書内でid名が使えるのは1回のみです。

本文)
<開始タグ id="id名">~<終了タグ>

例)

#header{
	width: 600px;
	height: 30px;
	color: #ffffff;
	background: #444444;
}

#main{
	width: 600px;
	height: 60px;
	background: #eeeeee;
}

#footer{
	width: 600px;
	height: 30px;
	color: #ffffff;
	background: #444444;
}

本文)
<div id="header">...</div>

<div id="main">...</div>

<div id="footer">...</div>

上記のHTMLドキュメント


classを指定

.class名{プロパティ: 値;}

要素.class名{プロパティ: 値;}

ピリオド(.)に続けて任意のclass名つけセレクタを指定すると、class="任意のclass名"と指定した要素にスタイルが適用されます。

ピリオド(.)の前に要素を指定した場合は、指定した要素以外の要素にclass="任意のclass名"を指定してもスタイルが適用されません。

idを指定する場合とは異なり、HTML文書内で何度でも指定することができますので、要素を限定しないスタイルの指定やスタイルをグループ分けする際に有効です。

本文)
<開始タグ class="class名">~<終了タグ>

例)

.example{
	font-weight: bold;
	font-size: 16px;
	color: red;
}

本文)
<div class="example">テキストAAAaaa</div>
<p class="example">テキストBBBbbb</p>

上記のHTMLドキュメント

例2)

h2.example{
	font-weight: bold;
	font-size: 16px;
	color: red;
}

本文)
<div class="example">テキストAAAaaa</div>
<h2 class="example">テキストBBBbbb</h2>
<p class="example">テキストBBBbbb</p>

上記のHTMLドキュメント