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

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

1冊ですべて身につくHTML & CSSとWebデザイン入門講座 | SBクリエイティブ

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

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

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

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

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

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

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

※書影:版元ドットコムより.