Simple HTMLHTMLリファレンス

Main Menu

おすすめリンク

Site Info.

HTMLリファレンス

CSSリファレンス

その他の記事

CSSリファレンス インデックス

スポンサーリンク

CSSリファレンス

汎用セレクタGeneral selectorsTOPCSSSelectorGeneral

  1. *ユニバーサルセレクタ
  2. E要素タイプセレクタ
  3. E#myidIDセレクタ
  4. E.warningクラスセレクタ

クラスセレクタClass selector

書式E.warning個別性10
クラスセレクタについて

クラスセレクタは、任意のClass名(warning)をセレクタとして指定でき、指定したクラス属性を持つ要素にマッチします。セレクタとしての役割的にはIDセレクタと同じですが、クラス属性の利用においては次のような制限があります。

クラス属性(セレクタ)を使う上での制限
  • クラス属性の値は1つのページにおいて、同じ属性名を複数記述することができる
  • クラス属性の値はアルファベット[A-Z]から始まる文字であること

クラス属性にはID属性のようなフラグメント識別子(同じページ内の特定の場所を示すもの)としての機能を持たないため、1つのページに同じ属性名を何度でも記述することができます。尚、クラス属性の値はID属性と同様に任意のものを指定できますが、アルファベット以外の文字(数字や記号など)から始まる文字は使用することができません。

クラスセレクタの使い方

IDセレクタは何度でも繰り返し使用できる局所性を利用して、一般的にコンテンツのデザインを示す名称として用いられています。

<div id="contents">
	<ul>
		<li class="list-fruits"> ... </li>
		<li class="list-fruits"> ... </li>
	</ul>
	<ul>
		<li class="list-fruits"> ... </li>
		<li class="list-fruits"> ... </li>
	</ul>
</div>
#contents li.list-fruits	{margin-left:3em}

また、スタイルの継承性を利用すれば、次のようにスッキリとした記述が可能です。

<div id="contents">
	<ul class="list-fruits">
		<li> ... </li>
		<li> ... </li>
	</ul>
	<ul class="list-fruits">
		<li> ... </li>
		<li> ... </li>
	</ul>
</div>
#contents ul.list-fruits	{margin-left:3em}

更に、コンビネータを利用すればclass属性を使わない指定も可能です。

<div id="contents">
	<ul>
		<li> ... </li>
		<li> ... </li>
	</ul>
	<ul>
		<li> ... </li>
		<li> ... </li>
	</ul>
</div>
#contents>ul>li	{margin-left:3em}
スポンサーリンク
Copyright (C) 2010 Simple HTML. All Rights Reserved.