CSSでのセレクタの指定

CSSではどこにどのようなスタイルを適用するかを記したものです。
ここでどこにスタイルを適用するかを指定するのがセレクタです。
つまりCSSの記述はこのようになるといえます。

セレクタ{プロパティ: 値;}

前回の記事のように<h1>や<p>を指定すればその要素すべてに指定したスタイルが適用されます。
今回は主なセレクタについてについて確認したいと思います。

全称セレクタ

　HTMLの文章中のすべての要素に適用されるセレクタです。
　セレクタは*で記されます。
　例としては

　* {font-size: 18px;}

　この例ではすべての要素での表示される文字が18pxの大きさで表示されます。

タイプセレクタ

　要素をセレクタとして指定します。
　指定した要素すべてに適用されます。
　例としては
　
　h1{color: red;}

　この例では<h1>要素がすべて赤色で表示されます。

idセレクタ

　HTMLにid属性を追加してそれに適用するセレクタです。
　セレクタは#id名で指定します。
　例としては

　#midashi{color: blue;}

  <h1 id="midashi">見出し</h1>

　この例では<h1>要素が青色で表示されます。

　id名は同じHTML内の複数のタグに付けることはできません。
　例えば

　<h1 id="midashi">見出し</h1>
   <h2 id="midashi">見出し</h2>

　このように同じ名前のidは付けることはできません。
　またidセレクタは詳細度が非常に高くCSSの上書きが思うようにできなくなる可能性があります。なるべく以下のclass属性を用いたclassセレクタを用いるべきです。　

classセレクタ

　HTMLにclass属性を追加してそれに適用するセレクタです。
　セレクタは.class名で指定します。
　例としては

　.list{color: green;}

　<ul>
     <li class="list">リスト1</li>
     <li class="list">リスト2</li>
     <li class="list">リスト3</li>
　<ul>

　この例では<li>要素が緑色で表示されます。
　class要素はid要素と異なり複数のタグに同じ名前のclass名を付けることができます。

特定のclass名を持つ要素への適用

　ある要素のうち特定のclass名を持つ要素のみにCSSを適用する書式もあります。
　classセレクタの前にその要素を指定するものです。
　例としては

　li.list1{color: green;}

　<ul>
     <li class="list1">リスト1</li>
     <li class="list2">リスト2</li>
     <li class="list3">リスト3</li>
　<ul>

　この例では<li>要素のうちclass名list1を持つリスト1のみが緑色で表示されます。