セレクタのについて
セレクタの基本
CSSの書式は、まずスタイルの適用先を示し、それに続く「 { 〜 } 」内で具体的なスタイルを記述する。そのスタイルの適用先を示す部分のことを
「セレクタ」と言います。
セレクタにもいろいろな種類や指定方法があるが、もっとも基本となるのは要素名をそのままセレクタとして指定する方法です。例えばbody要素を適用対象と
したい場合、単純に「body{ 〜 }」と書きます。同様にh1要素なら「h1{ 〜 }」と書きます。
また、要素を限定するのではなく、全ての要素を適用対象にしたいときは「*」(アスタリスク)記号で表すことも可能。
要素名 { 〜表示方法の指定〜 }
body { 〜表示方法の指定〜 }
h1 { 〜表示方法の指定〜 }
h1,h2,p { 〜表示方法の指定〜 } （適用先を複数指定する場合）
idセレクタ
特定のid属性の値を指定してスタイルを適用させる方法。divなどのブロックレベルの要素ごとに指定できます。CSSでは「#」（シャープ）の後にid属性の値を書いて指定します。
HTML
<div id="mid">
CSS
div#mid { 〜表示方法の指定〜 }
このように指定すると「id="mid"」が指定されたdiv要素だけが適用対象となります。
#mid { 〜表示方法の指定〜 }
特に要素の指定をしない場合はこのように書いてもいい。
クラスセレクタ
id属性と同じで特定のclass属性の値を指定してスタイルを適用させる方法。要素ごとに指定できます。CSSでは「．」（ドット）の後にclass属性の値を書いて指定します。
HTML
<div class="mid">
CSS
div.mid { 〜表示方法の指定〜 }
このように指定すると「class="mid"」が指定されたdiv要素だけが適用対象となります。
.mid { 〜表示方法の指定〜 }
特に要素の指定をしない場合はこのように書いてもいい。
子孫セレクタ
適用先を指定する際、「A要素の中のB要素」という指定ができれば便利なことがあります。「Aという範囲の中のBの要素」というように範囲を限定できればid
属性やclass属性を無意味に増やすことなく適用先をスマートに指定できます。
書き方は複数のセレクタを半角スペースで区切って指定します。セレクタは半角スペースで区切ればいくつでも指定できます。
A B C { 〜表示方法の指定〜 }
#mid ul li { 〜表示方法の指定〜 }
リンク部分の指定方法
リンクはa要素で指定するがリンク部分は状態によって表示が変化します。マウスを乗せた時、訪問済みの時、そこでそれぞれの状態別にスタイルを適用できるように
「擬似クラス」という特別な書式が用意されています。
a要素で使用できる擬似クラスは以下の通りです。それぞれ記載した順番どおりに書かないと意図したような状態になりません。
a：link { 〜表示方法の指定〜 }
a：visited { 〜表示方法の指定〜 }
a：hover { 〜表示方法の指定〜 }
a：active { 〜表示方法の指定〜 }