CSSの書き方
▼セレクタを使いこなす-応用編
ここから応用編です。
ID名やクラス名を組み合わせることで更に細かく指定できます。
例）"sample"のクラス名を持つ要素の中にあるSPAN要素のみ文字色を赤にする▼CSS
.sample span {
color: red;
}
▼HTML
<div class="sample">
<span>テキスト１</span>
<div>テキスト２</div>
</div>
<div>
<span>テキスト２</span>
</div>
▼結果
テキスト１のみ適用されます。
テキスト２は、"sample"のクラス名を持つ要素の中にあっても、SPAN要素ではないので適用されません。
テキスト３はクラス名がついていないので適用されません。
例）DIV要素の中にある"sample"のクラス名を持つ要素のみ文字色を赤にする▼CSS
div .sample {
color: red;
}
▼HTML
<div>
<span class="sample">テキスト１</span>
<span>テキスト２</span>
</div>
▼結果
テキスト１のみ適用されます。
テキスト２は、SPAN要素にクラス名がついていないので適用されません。
例）"sample"のクラス名を持つDIV要素のみ文字色を赤にするID名やクラス名は、基本的にHTML内で同じ名前を持つ要素全てに適用されます。
この要素だけに適用させたいという時には、ID名の場合は『要素#ID名』、クラス名の場合は『要素.クラス名』とすることで、要素を制限できます。
▼CSS
div.sample {
color: red;
}
▼HTML
<div class="sample">テキスト１</div>
<span class="sample">テキスト２</span>
▼結果
テキスト１のみ適用されます。
テキスト２は、"sample"の名前をもっていますが、DIV要素ではないので適用されません。
ここから下は一応こんなのもあるよという紹介です。
基本的には、指定したい要素にID名やクラス名をつけてしまったほうが早いですし、後から編集するときも分かりやすいです。
私個人も、どうしてもこれを使わないとレイアウトできない、という場合にしか使いません。
E > F｜E要素の直下の階層にあるF要素例）DIV要素の直下の階層にあるSPAN要素のみ文字色を赤にする
▼CSS
div > span {
color: red;
}
▼HTML
<div>
<span>テキスト１</span>
</div>
<div>
<p>
<span>テキスト２</span>
</p>
</div>
▼結果
テキスト１のみ適用されます。
ちなみに、">"を" "半角スペースに変えると、"DIV要素の中にあるSPAN要素（前ページ参照）"の条件が成り立つのでテキスト２にも適用されます。
E + F｜E要素の直後に隣接するF要素例）DIV要素の直後に隣接するSPAN要素のみ文字色を赤にする
▼CSS
div + span {
color: red;
}
▼HTML
<div>テキスト１</div><span>テキスト２</span>
<span>テキスト３</span>
▼結果
テキスト２のみ適用されます。
テキスト３はDIV要素に隣接していないので適用されません。