【スキルハックス】CSSセレクタの指定をする方法を学ぶ

前回『どこの｛どんなパラメーターを：どうする？｝』のどこのがセレクタと説明しました。今回はそのセレクタの指定方法を学んでいきます。

まずはpタグをredにしてみます。前回の続きから。

HTMLで<h1>タグと<h2>タグを追加します。redを指定しているのはpタグのみなので、<h1>タグと<h2>タグは黒で表示されます。

<h1>タグと<h2>タグにそれぞれblueとgreenを指定します。それぞれ色が変わります。

一度、全部の消して、黒に戻します。

次に『＊』でredを指定すると全て赤になります。！マークがついてますが、全てにredを指定するので遅くなりますという事ですが、問題ありません。

次にpタグにgreenを指定します。すると全体のredではなく、細かく指定したgreenが優先されます。

次に12行目のpタグの色を変えてみます。HTMLで学んだidを使って目印を付けます。

idの場合は『＃』をつけて上記のように書くとblueを指定することができます。

もし12行目と13行目のpタグに目印を付けたい場合は、idが使えません（重複がダメなため）。そんなときにはclassを使います（重複可能）。

classは『．』（ドット）をつけて上記のように書くとyellowを指定できます。（見にくいですが…）

<h2>タグにも同じようにclassの目印を付けてみます。（まだ更新していません）

<h2>タグにも同じようにclassの目印を付けているので、上記のようになります。

ちなみにpタグのclassにだけyellowを指定したい時には『p．』というセレクタにするとpタグのclassにだけyellowを指定することができます。