TOP > CSSリファレンス > セレクタ

セレクタ(selecter)

 セレクタ(selecter)はCSSの基本となる記述方法です。CSSでは、セレクタによって対象のタグエレメント(要素)を指定し、そのエレメントのスタイルを既定のプロパティーと値で設定します。

CSSの記述

例えば以下のように記述します。

例:CSSの記述方法

p.calss_name {				/* selecter */ 
	margin: 1em;			/* property & property value */
	padding: 1em;
	background-color: black;
	color: white;
}

 p.calss_nameはセレクターと呼ばれ、任意のタグエレメントの指定をします。
 このセレクターの後 { と } で囲まれたのがタグエレメントのスタイル宣言です。
 スタイル宣言は、プロパティーとその値で構成されます。

セレクタ

 セレクタには以下があり、以下のセレクタを組み合わせて使うこともできます。

selecter name指定方法例説明
タグエレメントセレクタタグ名任意のタグを指定します。例えば、aを指定すれば、全ての<a>が対象になります。
クラスセレクタ.classclass="クラス名"を持ったタグエレメントが対象になります。
IDセレクタ#idid="ID名"を持ったタグエレメントが対象になります。
属性セレクタ属性名とその値タグエレメントの属性(attribute)が対象になります。
全称セレクタ*全てを対象にします。上記と組み合わせて使います。
擬似クラスセレクタ:hoverセレクターと組み合わせるもので、タグエレメントに何らかの動きがあればという宣言になる。

セレクタ組み合わせの方法

子要素、孫要素について