【CSS入門】 適用される見た目の優先順位を知ろう

CSSでは1つの要素に複数の宣言 (見た目) を適用できますが、宣言がかぶった場合にどれが適用されるかは、優先順位で決まります。

ここでは、セレクタに応じて決まる優先度がどのように計算されるのかを紹介します。

宣言とは、プロパティと値のセットのことです。例えば、color: red;というひとまとまりが宣言です。

【CSS入門】 CSSの構造

CSSは、対象となるHTMLのタグ群 (セレクタ)、見た目の項目名とその値の3つで構成されています。 ここではそれらの基本的な書き方を学んでいき…

宣言順による優先順位

ルールは、後に指定したほうが優先されます。

See the Pen css priority order by Totori (@souki202) on CodePen.

s1の例では、1つのルールの中に複数の同じプロパティが入っています。s2では、別々のルールに同じプロパティが入っています。どちらも、後に宣言されたほうが優先されていることが分かります。

セレクタによる優先順位

セレクタによってポイントがあり、その合計値によってどのルールが適用されるか決まります。

セレクタの種類は下の記事にあります。

【CSS】見た目の適用対象を指定する種類 (セレクタ)

プロパティを適用する対象を指定するのに使うもののことをセレクタと呼びます。子要素だけ対象にする、チェックボックスがついていたら対象にするなど、幅…

セレクタには、例えば.header .nav-item aのように書きますが、こういったものは合計値が使われます。この例だと、10 + 10 + 1 = 21となります。

合計値が同じ場合、後に宣言されたものが優先されます。

See the Pen css priority score by Totori (@souki202) on CodePen.

また、この優先順位を利用して、汎用的なルールと特化したルールを混在させる書き方もあります。

ul {
    /* flexを利用して要素を縦方向に並べるのを基本にする */
    display: flex;
    flex-direction: column;
}

li {
    list-style: none;
}

/* <ul class="nav-menu">...</ul> という要素があると仮定 */
.nav-menu {
    flex-direction: row; /* ここのulだけは横方向に並べる */
}

こうすると、普通のulにはdisplay: flex;とflex-direction: row;が、<ul class="nav-menu">...</ul>には、display: flex;とflex-direction: column;の2つが適用されます。

!important

!importantを利用することで、そのルールをポイント関係なく適用させることができます。

See the Pen css priority important by Totori (@souki202) on CodePen.

この例では、idを2つ指定しているものより、ポイントが0の*に書いたほうが優先されていることがわかります。

方向指定や、まとめて宣言できるものの上書き

例えばborderのように、方向指定ができたり、複数のプロパティを一括で書けるものがありますね。

これらは、各方向等で別々で管理されます。

See the Pen css override by Totori (@souki202) on CodePen.

つまり、border: 3px solid #f00;は、

.border-sample {
    border-top-width: 3px;
    border-right-width: 3px;
    border-bottom-width: 3px;
    border-left-width: 3px;
    
    border-top-style: solid;
    /* ... */
    border-left-style: solid;

    border-top-color: #f00;
    /* ... */
    border-left:color: #f00;
}

と宣言しているのと同等ということになります。

まとめ

特にセレクタによる優先順位は重要で、どのルールが適用されるかはほぼこれで決まります。経験上、設定したはずの見た目が適用されない原因の多くは、優先順位とスペルミスのいずれかです。

ポイントが低いセレクタでより汎用的なルールを記載し、ポイントが高いルールで一部を特化させる、といった使い方は極めて多く見受けられます。

優先順位を把握して、セレクタをうまく乗り回せるようになりましょう!