【実践】指定した場所だけにCSSを適用する

最後に指定した要素にCSSを指定する場合です。
例えば以下の画像ように一番上だけ赤くするにはどうしたら良いのでしょうか？

ここでは「li」タグが３つ使用されている構造になっていますね。

<ul> 
    <li>aaa</li> 
    <li>bbb</li> 
    <li>ccc</li>
</ul>

このような場合に、タグにCSSを指定してしまうと全部が赤くなってしまいます。

li {
    color: red;
}

このように同じファイル内で同じタグを使用していると、そのタグ全てにCSSがかかってしまうので、場所の指定をする場合には「class」を指定します。

【index.html】

<ul>
    <li class="select">aaa</li>
    <li>bbb</li>
    <li>ccc</li>
</ul>

ダブルクォーテーションの中の名前は任意でつけるのでわかりやすい名前にすると良いでしょう。

【style.css】

.select { 
    color: red;
}

この時に注意することは「class」を使用してCSSを反映させる場合は「.(ドット)」をつけることを忘れないでください。

【実行結果】

次に今の例で２つ目にも１つ目と同じように文字を赤色にしてみましょう。
このような場合は２つ目のタグにも同じクラスを追加してあげれば良いですね。

<ul>
　　<li class="select">aaa</li> 
　　<li class="select">bbb</li> 
　　<li>ccc</li>
</ul>

【実行結果】