セレクタの優先順位

書いたのに効かない

CSS を書きはじめると必ずぶつかるのが、書いたはずのスタイルが効かない場面です。原因のほとんどは、同じ要素に別のルールがあたっていて、そちらが勝っていることです。

どちらが勝つかは詳細度という強さで決まります。強い順に、id セレクタ、class セレクタ、要素セレクタです。強さが同じなら、あとに書いたほうが勝ちます。

クラスは要素に勝つ

自己紹介の段落には p のルールで line-height 1.8 があたっています。ここだけもう少し広くしたいとき、class のルールを足せば要素セレクタに勝ちます。

書く場所が上でも下でも結果は同じです。class のほうが強いので、p の指定は上書きされます。

継承というもう 1 つのしくみ

色や文字の設定は、指定した要素の中にある要素へ自動的に受けつがれます。これが継承です。body に color を書いただけで本文全体の色が決まったのは、これのおかげです。ただし背景色や余白は継承されません。

id で 1 か所だけ変える

最後に、お問い合わせの見出しだけテーマカラーにします。すでに .section-title で濃紺があたっていますが、id を組み合わせたセレクタなら勝てます。

これは id が contact の要素の中にある section-title という意味です。6 つの見出しのうち 1 つだけが色を変えます。

1. .highlight を書いて、自己紹介の名前をテーマカラーの太字にする
2. .profile-text を書いて、自己紹介の段落の行間を p の指定より広くする
3. #contact .section-title を書いて、お問い合わせの見出しだけ色を変える