MitoRoidCSS -セレクタ-
IDセレクタ
IDセレクタは、HTML文書内の要素１つだけに特別なスタイルを設定する時に使用します。
HTML文書側には、id属性で属性値を指定を行い、スタイルシート側で指定されたid属性値の前に#をつけて指定します。
<div id="content">
・・・・・
<div>
#content {
・・・・・
}
クラスセレクタ
クラスセレクタは、HTML文書内の複数の要素に設定する場合に使用します。
HTML文書側には、class属性で属性値を指定を行い、スタイルシート側で指定されたclass属性値の前に.(ドット)をつけて指定します。
<div class="sample">
・・・・・
<div>
.sample {
・・・・・
}
* (すべての要素に適用)
アスタリスク（*）ですべての要素にスタイルを適用することができます。
* {
color:#333333;
}
E F (子要素に適用)
セレクタを半角スペースで区切ると、ある要素の下の階層にある要素にスタイルを適用します。
p strong {
color:#cdcdcd;
}
※ pタグの中にあるstrong要素に適用されます。
E > F (子要素のみ適用)
セレクタを「>」で区切ると、ある要素の直下の階層にある要素にスタイルを適用します。
div.sample > a {
color:#cccccc;
}
※ クラス名sampleの直下にあるa要素にのみ適用されます。
E + F (隣接している要素に適用)
「+」で隣接している要素にスタイルを適用します。
h2 + p {
color:#cccccc;
}
※ h2要素に隣接しているp要素に適用されます。