いまさら聞けないCSSセレクターの基礎

CSSの構文を日ごろから読んでいるけど、基本的なことを良く忘れる。馬鹿なので。
というわけでいまさら聞けないCSSセレクターの基礎を頑張って自分が自分に教えてみる。

今回の教科書は例のmana本です。

簡単に言えば、CSS適用する部分をHTMLと照らし合わせて参照するための指定コマンドのことをセレクタ―と呼ぶ。何はともあれ、次のCSS構文を見てほしい。

p div とあるが、これはセレクターを併記して記載している事例である（このようにセレクターはピリオドで併記することができることは忘れないでほしい）。ここでピリオド（点と覚えよう）がついていないセレクターは、タイプ・セレクターである。select および option というタイプ・セレクターである（HTMLの全ての要素はタイプ・セレクターになりえる）。

では、ピリオドがついているセレクターは何だろうか？次の構文を見てほしい。これはdivというHTML要素で絞り込んだうえで、remenu というクラス・セレクターに適用できる、というセレクションの意味を持つ。クラス・セレクターはHTMLタグの中のclass属性に貼り付くセレクターである。

クラス・セレクターも併記できることも忘れないでほしい。つまりピリオドとコンマ（数単位を英文で記載するときの区切りと同じ記号）を併用して、remenu remenu2 のふたつに併記してクラス・セレクションすることもできるのだ。

対してIDというセレクターもある。これは一意セレクターと呼ばれるもので、基本的に一回だけCSS上からコマンド（プロパティ+値）使いたいときに駆使するセレクターであることを覚えておけばよい。例えば…

あとは思いついたときに追記する（スタブ）。

※書影：Amazonより.