カスケードしたい

p {
    color: black;
}

p {
    color: red;
}

CSSは、1つの要素に対していくつものスタイルを指定できます。 スタイルの設定は「カスケード」と呼ばれるルールにしたがって決まります。

上記サンプルでは、同じ段落タグ（<p>）に文字色を2回指定しています。 1つ目のcolor: black;は黒、 2つ目のcolor: red;は赤ですが、 この場合は赤が採用されます。

注釈

"Cascade"は「滝のように流れる」という意味です。

詳細度したい（specificity）

a {
    color: blue;
}

.link {
    color: green;
}

<a href="URL" class="link">リンク</a>

CSSのカスケードルールの1つ目は「詳細度（specificity）」です。

詳細度は、セレクターの種類によって割り当てられている「点数」を加算した値です。 複数のセレクターが同じ要素にぶつかったとき、詳細度が高い方が採用されます。

点数の目安は次のとおりです。

セレクターの種類	点数	例
IDセレクター（ID selector）	100	#header
クラスセレクター（Class selector）	10	.link
属性セレクター（Attribute selector）	10	[type="text"]
擬似クラス（Pseudo-class）	10	:hover
タイプセレクター（Type selector）	1	a
擬似要素（Pseudo-element）	1	::before
ユニバーサルセレクター（Universal selector）	0	*

セレクターを#main .list li aのようにつなげて書くと、それぞれの点数が足し算されます。 この例だと100 + 10 + 1 + 1で、合計111点です。

セレクターを長くつなげるほど点数が上がり、あとから別のスタイルで上書きするのが難しくなります。 ふだんはクラスセレクター1つで指定して、点数をなるべくそろえておくと管理が楽になります。

記述順したい

.button {
    background: gray;
}

.button {
    background: blue;
}

カスケードルールの2つ目は「記述順」です。 詳細度の点数が同じスタイルどうしがぶつかったときは、あとに書かれたほうが採用されます。

上のサンプルは、どちらも.buttonで点数が同じです。 あとに書いた青が採用され、ボタンの背景は青になります。

この「あと」には、ファイルを読み込む順番もふくまれます。 <link>タグや@importでCSSファイルを複数読み込むと、うしろに読み込んだファイルの指定が優先されます。 だから、自分で上書きしたいCSSは、フレームワークのCSSより下に置きます。

上書きを強制したい（!important）

.alert {
    color: red !important;
}

#box .alert {
    color: gray;
}

カスケードルールの3つ目は「!important」です。 !importantを付けたスタイルは 詳細度や記述順を無視して最優先されます。

上のサンプルでは、#box .alertのほうが点数は高いです。 それでも!importantがついた赤が勝つので、文字色は赤になります。

!importantは強力ですが、これに勝つにはさらに!importantを重ねるしかなく、原因を追いにくいCSSになります。 自分で書くCSSでは基本的に使いません。 フレームワークのCSSをどうしても一部だけ上書きしたい、といった場面にとどめます。

警告

!importantをあちこちで使っているとしたら、詳細度の設計がうまくいっていないサインです。 セレクターをクラス1つにそろえるなど、書き方を見直すほうが先です。

継承したい（inherit）

body {
    color: #333;
    font-family: system-ui, sans-serif;
}

colorやfont-familyなど一部のプロパティは、親要素に指定した値を子要素が自動的に受け継ぎます。 このしくみを継承といいます。

上のサンプルでは、bodyに文字色とフォントを指定しています。 中にあるpやaに何も指定しなくても、同じ文字色とフォントが適用されます。

継承されるのは、font-sizeやline-heightなど、文字まわりのプロパティが中心です。 margin、padding、border、backgroundなどは継承されず、要素ごとに指定する必要があります。

.card {
    color: inherit;
    border: initial;
}

継承するかどうかは、キーワードで指定し直すこともできます。 inheritは親の値を受け継ぎ、initialはそのプロパティの初期値に戻します。

いまの文字色を使い回したい（currentColor）

.icon {
    fill: currentColor;
    border: 1px solid currentColor;
}

currentColorは、その要素にいま効いているcolorの値を指す特別なキーワードです。

上のサンプルでは、アイコンの塗りつぶしと枠線にcurrentColorを指定しています。 colorを変えるだけで、アイコンの色も枠線の色も一緒に変わります。 色の指定を1か所にまとめられるので、テーマ色の管理が楽になります。

リファレンス

• カスケード

• 詳細度

• 継承

• !important