セレクタの優先順位

書いたのに効かない

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

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

クラスは要素に勝つ

たとえば読書案内のページで、p の行間が 1.4 だとします。あらすじだけ行間を広げたいとき、class のルールを足せば要素セレクタに勝ちます。

.book-summary {
  line-height: 1.6;
}

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

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

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

id で 1 か所だけ変える

図書館の案内で、id が library の領域にある見出しだけ茶色にするとします。クラスの指定と競合しても、id を組み合わせたセレクタなら勝てます。

#library .book-title {
  color: #854d0e;
}

これは id が library の要素の中にある book-title という意味です。ほかの領域の見出しには効きません。

半角スペースで範囲を絞る

セレクタを半角スペースでつなぐと、左の要素の中にある右の要素を選びます。子孫セレクタと呼び、直接の子に限らず、その中の要素にも届きます。たとえば時間割の表だけのセルを茶色にするなら、次のように書けます。

.schedule-table td {
  color: #854d0e;
}

td だけならすべての表のセルに届きますが、この指定なら schedule-table クラスの表の中だけが対象です。

1. .highlight の中に font-weight の bold を追加し、自己紹介の名前を太字にする
2. .profile-text のルールを書き、line-height を 1.9 にして p の 1.8 より広げる
3. #contact .section-title のルールを書き、お問い合わせの見出しの文字色を #0071e3 にする
4. th のセレクタを .skill-table th に書きかえ、スキル表の見出しだけに指定を絞る