TOP - CSS1(Cascading Style Sheets, level 1) - セレクタの種類


(1) クラスによるセレクタ

タグ名の後にピリオドとクラス名を追加した形式で記述します。
スタイルをタグに適用する際は、タグのclass属性にクラス名を指定します。
タグ名を付けずにピリオドとクラス名のみで記述した場合は、スタイルを適用するタグの種類は限定されません。
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=UTF-8">
<TITLE>テスト</TITLE>
<STYLE type="text/css">
<!--
P.color_red {color: red}
P.color_blue {color: blue}
.color_green {color: green}
-->
</STYLE>
</HEAD>
<BODY>
<P class="color_red">ここは赤で表示されます</P>
<P class="color_blue">ここは青で表示されます</P>
<P class="color_green">ここは緑で表示されます<P>
<H2 class="color_green">ここは緑で表示されます</H2>
</BODY>
</HTML>

(2) IDによるセレクタ

タグ名の後に#とタグのID属性の値を追加した形式で記述します。
スタイルをタグに適用する際は、タグのid属性にスタイルで定義をしたID属性の値を指定します。
タグ名を付けずに#とID属性の値のみで記述した場合は、スタイルを適用するタグの種類は限定されません。
クラスと違いIDは一つのタグに固有なものであるため、ドキュメント内での再利用ができません。
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=UTF-8">
<TITLE>テスト</TITLE>
<STYLE type="text/css">
<!--
P#color_red {color: red}
P#color_blue {color: blue}
#color_green {color: green}
-->
</STYLE>
</HEAD>
<BODY>
<P id="color_red">ここは赤で表示されます</P>
<P id="color_blue">ここは青で表示されます</P>
<H2 id="color_green">ここは緑で表示されます</H2>
</BODY>
</HTML>


Copyright(C) 2006-2011 CLAYPOT. All Rights Reserved.