ホーム > HTML > セレクタ

CSS -セレクタ-

IDセレクタ

IDセレクタは、HTML文書内の要素1つだけに特別なスタイルを設定する時に使用します。

HTML文書側には、id属性で属性値を指定を行い、スタイルシート側で指定されたid属性値の前に#をつけて指定します。

使用例(HTML側)
<div id="content">
    ・・・・・
<div>
使用例(スタイルシート側)
#content {
    ・・・・・
}

クラスセレクタ

クラスセレクタは、HTML文書内の複数の要素に設定する場合に使用します。

HTML文書側には、class属性で属性値を指定を行い、スタイルシート側で指定されたclass属性値の前に.(ドット)をつけて指定します。

使用例(HTML側)
<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要素に適用されます。