【スキルハックス】CSSセレクタの組み合わせを学ぶ

今回は前回のCSSセレクタの指定法にプラスして、セレクタの組み合わせを学んでいきます。

前回からのCSSを全て消して、文字を黒くします。

h1タグを赤くするときは、上記のように書きます。

h1タグと一緒にpタグを赤くするときは、セレクタを『h1,p』（h1とpタグの間はコンマ）とするとh1タグとpタグを赤くすることができます。

次にh1タグとclassの色を変えてみます。

h1タグとclassを黄色に変えるには、セレクタは『h1,.yellow』とします。※h1コンマドットyellow

ちなみにh1タグとpタグのclassを黄色にしたい時には、セレクタを『h1,p.yellow』とします。

次にdivタグの下にpタグを作ります。

divタグの下のpタグを指定する時は、『div p』（間はスペース）で表します。スペースは階層関係をしてします。

次にh1タグとpタグ青しようとすると、divタグ内のpタグは赤いままです。より細かい指定を優先するためにこのようになります。

h2：hoverというセレクタにすると、一見変わらないように見えますが、カーソルを合わせると…

緑になります。hoverはh2タグの上にカーソルを合わせるとgreenを適用してくださいという指定の方法です。この：の後は状態を指定しているものになります。：は疑似クラスを指定するセレクタになります。