特定の要素内の要素だけにスタイルを指定する方法

基本的には要素名に続けて半角スペースを空けてから、中の要素名を指定します。

特定の要素の直下ににある要素や直後にある要素を指定する方法もあります。

CSSのセレクタは、複数のセレクタを組み合わせることができます。組み合わせによって、要素の親子関係や記述の順序から限定してスタイルを適用させることもできます。セレクタの組み合わせは、3つの基本パターンがあるので、覚えておきましょう。

1つ目が、基本となる、セレクタの間を半角スペースで空ける組み合わせです。
[css]
p a {
color:#000;
}
[/css]
セレクタの間を半角スペースで空けることで、特定のセレクタの中にあるものだけスタイルを変更しています。上記の場合は、p要素内のa要素(リンク)の文字色を指定しています。

2つ目が、セレクタの間を「>」で区切る組み合わせです。
[css]
.col > p {
color:#000;
}
[/css]
セレクタの間に「>」を記述すると、特定のセレクタの直下にあるものだけスタイルを変更できます。上記の場合は、クラス属性.colの要素直下のp要素の文字色を指定しています。

3つ目が、セレクタの間を「+」で区切る組み合わせです。
[css]
h2 + p {
color:#000
}
[/css]
セレクタの間に「+」を記述すると、特定のセレクタの直後にあるもだけスタイルを指定できます。上記の場合は、h2要素と同じ親要素の中にあるh2要素直後のp要素の文字色を指定しています。

カテゴリー: CSS, HTMLの基礎知識, ナレッジノート, 要素   パーマリンク