ＣＳＳセレクタの使い方

CSSセレクタはスタイルを適用する対象を指定するものです、使用例を付けて説明します
　　（１）　*（アスタリスク）
　　　　 全ての要素にスタイルを適用する
　　　　　　* {color:red;}
　　　　　　　　全ての要素の色に赤色を適用する
　　　　　　p * {color:red;}
　　　　　　　　p（段落）として指定した要素全てに赤色を適用する

　　（２）　. （ピリオド）
　　　　指定したクラス名の要素にスタイルを適用する
　　　　　　.sample {font-size:18px; color:red;}
　　　　　　　　class=”sample”で指定した要素にサイズと色を適用する
　　　　　　p.sample {font-size:18px; color:red;}
　　　　　　　　<p class="sample"> にサイズと色を適用するが<div class="sample">には適用されない

　　（３）　# （シャープ）
　　　　指定したid名の要素にスタイルを適用する
　　　　　　　　idの場合は1つの要素にしか適用されない
　　　　　　　　idの場合はjavascriptやページ間の移動の際によく使われる
　　　　　　#sample {font-size:16px;}
　　　　　　　　id=”sample”で指定した要素にサイズを適用する

　　（４）   （スペース）
　　　　子や孫の要素にスタイルを適用する
　　　　　　　　セレクタを半角スペースで区切ると、ある要素の下の階層にある要素にスタイルを適用する
　　　　　　p strong {font-size:16px;}
　　　　　　　　pタグの中にあるstrong要素にサイズを適用する
　　　　　　.mago strong {font-size:16px;}
　　　　　　　　クラス名magoの中にあるstrong要素にサイズを適用する
　　　　　　p.mago strong
　　　　　　　　クラス名magoのp要素のなかにあるstrong要素にサイズを適用する

　　（５） > （不等号）
　　　　ある要素の直下の階層にある要素にスタイルを適用する
　　　　　　div.sample > a {font-size:18px;}
　　　　　　　　クラス名sampleの直下にあるa要素（リンク１）にのみサイズを適用する
　　　　　　　　　　<div class="sample">
                        <a href="#">リンク１<a/>
　　　　　　　　　　　 　<ul>
　　　　　　　　　　 　　　　<li><a href="#">リンク２<a/></li>
                           </ul>
　　　　　　　　　　<div>

　　（６） + （プラス）
　　　　隣接している要素にスタイルを適用する
　　　　　　h4 + p {color:red; font-weight:bold;}
　　　　　　　　h4の要素の隣にあるp（段落）のみに適用される
　　　　　　　　　　<h4>H4要素</h4>
　　　　　　　　　　<p>h4要素の隣です</p>　・・・・・　この要素にだけ赤色と太字を適用する
　　　　　　　　　　<p>h4要素の隣の隣です</p>

　　（７） ~　（～記号）
　　　　後ろにある要素にスタイルを適用する
　　　　　　h4 ~ p {color:red; font-weight:bold;}
　　　　　　<p>h4要素の前</p>　　　・・・・・　この要素には適用されない
　　　　　　　　<h4>H4要素</h4>
　　　　　　<p>h4要素の後</p>　　　・・・・・　この要素に赤色と太字を適用する
　　　　　　<p>h4要素の後</p>　　　・・・・・　この要素に赤色と太字を適用する