CSSの構文を日ごろから読んでいるけど、基本的なことを良く忘れる。馬鹿なので。
というわけでいまさら聞けないCSSセレクターの基礎を頑張って自分が自分に教えてみる。
今回の教科書は例のmana本です。
簡単に言えば、CSS適用する部分をHTMLと照らし合わせて参照するための指定コマンドのことをセレクタ―と呼ぶ。何はともあれ、次のCSS構文を見てほしい。
p div とあるが、これはセレクターを併記して記載している事例である（このようにセレクターはピリオドで併記することができることは忘れないでほしい）。ここでピリオド（点と覚えよう）がついていないセレクターは、タイプ・セレクターである。select および option というタイプ・セレクターである（HTMLの全ての要素はタイプ・セレクターになりえる）。
|
1 2 3 |
p, div { border-color: #000; } |
では、ピリオドがついているセレクターは何だろうか？次の構文を見てほしい。これはdivというHTML要素で絞り込んだうえで、remenu というクラス・セレクターに適用できる、というセレクションの意味を持つ。クラス・セレクターはHTMLタグの中のclass属性に貼り付くセレクターである。
|
1 2 3 4 |
div.remenu { margin-top: 16px; margin-bottom: 16px; } |
クラス・セレクターも併記できることも忘れないでほしい。つまりピリオドとコンマ（数単位を英文で記載するときの区切りと同じ記号）を併用して、remenu remenu2 のふたつに併記してクラス・セレクションすることもできるのだ。
|
1 2 3 4 |
.remenu,.remenu2 { margin-top: 16px; margin-bottom: 16px; } |
対してIDというセレクターもある。これは一意セレクターと呼ばれるもので、基本的に一回だけCSS上からコマンド（プロパティ+値）使いたいときに駆使するセレクターであることを覚えておけばよい。例えば…
|
1 2 3 4 |
#title { background: #000; color: #fff; } |
あとは思いついたときに追記する（スタブ）。
※書影：Amazonより.
