セレクターとカスケード

二つのルールが同じ要素に違う色を指定したとき、CSS は当てずっぽうでは決めません。セレクターを比べ、id はクラスがいくつあっても勝ちます。

要素を選ぶ

セレクターは、ページの中の要素に一致するパターンです。いちばん簡単なものは、要素名、クラス、id で一致させます。p は型セレクターで、すべての段落に一致します。.note はクラスセレクターで、class="note" をもつすべての要素に一致します。一つの要素が空白で区切った複数のクラスをもつこともでき、一つのクラスを多くの要素に使うこともできます。#intro は id セレクターで、id="intro" をもつただ一つの要素に一致します。全称セレクター * はすべてに一致します。

p { line-height: 1.5; }            /* every p */
.note { background: #fff4d6; }     /* class="note" */
#intro { font-size: 20px; }        /* id="intro" */
h1, h2 { font-weight: 600; }       /* group: h1 and h2 */
nav a { text-decoration: none; }   /* a anywhere inside nav */
ul > li { margin: 4px 0; }         /* li that is a direct child of ul */
a:hover { text-decoration: underline; }
input[type="email"] { width: 20em; }

セレクターを組み合わせる

コンマは同じ宣言を共有するセレクターをまとめるので、h1, h2 は両方にスタイルを適用します。空白は子孫結合子です。nav a は、nav の中にあるリンクに、どんなに深くても一致します。> はもっと厳しく、直接の子だけに一致します。a.active のように二つの単純セレクターを空白なしで続けて書くと、一つの要素が両方に一致しなければなりません。つまり、クラス active ももっているリンクです。角かっこで書く属性セレクターは、input[type="email"] のように属性で一致させます。

コロン一つで書く疑似クラスは、特定の状態や位置にある要素を選びます。:hover はポインターが上にあるとき、:focus-visible はキーボードのフォーカスがあるとき、:first-child は親の最初の子であるときです。コロン二つで書く疑似要素は、::first-line や ::placeholder のように、要素の一部分にスタイルを適用します。

ルールがぶつかったとき

同じ要素の同じプロパティを、いくつものルールが指定することはよくあります。どれが勝つかを決めるのが、CSS の C にあたるカスケードです。ブラウザー自身のスタイルと !important を別にすれば、ほとんどの場合は二つの問いで決まります。一つ目は、どちらのセレクターの詳細度が高いかです。詳細度は三つの数で数えます。id の数、次にクラスの数（属性セレクターと疑似クラスを含む）、そして要素名の数です。#menu a は 1-0-1、.active は 0-1-0、nav a は 0-0-2 です。数は左から比べるので、id が一つあればクラスがいくつあっても勝ちます。二つ目は、詳細度が同じなら、スタイルシートの後ろにあるルールが勝つということです。

インラインの style 属性はどんなセレクターにも勝ち、!important をつけた宣言はふつうの宣言に勝ちます。どちらもすぐ直せるので使いたくなりますが、次の変更が難しくなります。それを上書きするには、同じものをさらに重ねるしかないからです。多くのチームは詳細度を低くそろえ、主にクラスでスタイルをつけて、ファイルの中の順番だけで結果を予想できるようにしています。

継承

プロパティの中には、親から子へ自動的に受けつがれるものがあります。body に color や font-family を指定すると、中にあるすべての段落、リスト、表のセルがそれを受けつぎます。ただし、自分で指定するルールがある場合は別です。文字に関するプロパティはふつう継承されますが、width、padding、border、margin などのボックスに関するプロパティは継承されません。section につけたボーダーが、中のすべての段落のまわりに現れないのはこのためです。キーワード inherit を使うと、プロパティに親の値を強制的にコピーさせられます。

クラス名は、見た目ではなく、それが何であるかでつけましょう。デザイナーが色を赤からオレンジに変えても .warning は意味が通りますが、.red-text は通りません。id は一つしかないので、スタイルづけよりもリンク先やフォームのラベルのためにとっておくのがよく、そうすると詳細度も低く保てます。