継承と「親子関係」・優先順位・後勝ち

基本的に css ファイルにひたすら記述を行っていくわけですが、ある時点で同じプロパティに対して複数の異なる値を設定してしまうことがあります。

その場合は、どのように表示されるのか疑問に思われるのではないでしょうか。
これは間違いなく記述を進めていく中で考慮しなければいけない重要なポイントです。

まずは、例として article 要素を対象に赤字にする装飾を施しましょう。

article {
  color: red;
}

sample_4-4
https://ezo-style.com/sample/sample-4-4.html

sample_4-4 のように、h3 要素の”見出し・キャッチコピー”と p 要素の文字が赤字になったかと思います。

ここに「継承」という仕組みが働いています。

親要素である article 要素に装飾がされたので、それの子要素らは親要素のプロパティを『継承』して赤色になっています。

継承と「親子関係」

子要素・子孫要素(子要素のさらに下階層の要素)が親のプロパティを引き継ぎ適用される仕組みです。

そして、継承の対象は主に”テキスト・フォント・色”に関わるプロパティと内容を引き継ぎます。

なので、この親子関係に無い section 要素とその下の要素たちに変化は置きません。

では、その一方で子要素であるはずの h2 要素はなぜ先ほどの表示方法のまま継承の影響を受けていないのでしょうか。

これは、CSS において重複したプロパティが記述された場合に何を優先するかの「優先順位のルール」が存在する為です。

優先順位のルール

優先順位の仕組みは、セレクターに対する点数による判別の仕組みがあり、それの大小で決まるというものです。

その点数自体については詳しくは触れませんので気になる方はお調べください。

ということで、優先される順番は以下の通りになっています。

１． !IMPORTANT　と付くプロパティ
p { color: red !important; }　と記述した場合、p 要素の文字は絶対に赤色になります。
他に class や id セレクター・要素セレクターでの記述があり color プロパティが重複したとしてもこれが最優先されます。

これは、後述で説明する後勝ちのルールも無視します。
※　書き足しや修正時に扱いづらいため、使用をあまり推奨されません。

２．STYLE 属性
style 属性で要素へ直接記述のものは、css ファイルのものより優先されます。

３．ID セレクター
４．CLASS セレクター
５．要素セレクター(別名：タイプセレクタ―)

６．全称セレクター
” * (アスタリスク) ” で要素全体を対象にしたセレクター

* {
  color: blue;
}

この記述を行った場合、ページ全体の文字の色が青色になります。
が、もっとも優先順位が低いのでクラスで簡単に上書きできます。

この順位により、先ほどの h2 要素はclass 属性が優先され変化しませんでした。

class セレクターの使用が推奨されるのは、この強弱関係を把握・コントロールし、レイアウトを保持するためです。

特殊な記述を行わなければ、最も優先されるのは class になるからです。

※この順位には、親子関係と継承は関係ないので注意して下さい。

では、article 要素の class 属性を書き足して、色を元に戻してみましょう。

html には、

<article class="text-black">
  <!-- "text-black"クラスを書き足す。-->
  <h2 class="yellow-blue">記事のタイトル</h2>
  <h3>見出し・キャッチコピー</h3>
  ... ...
</article>

css には、

article {
  color: red;
}
/* この下に上書きするクラスを書き足す。 */
.text-black {
  color: black;
}

sample_4-5
https://ezo-style.com/sample/sample-4-5.html

これにより、.text-black がクラスのため優先されるので元に戻るはずです。

後勝ち

CSS における記述では、点数が同じ(同格のセレクター同志)でプロパティが重複した場合、 最も後の方(下の方に記述された新しい方)が優先 されます。

css ファイルは、上から下に読み込まれ、重複している箇所は後に読み込んだ方に上書きされるためです。

例えば、

.text-color-1 {
  color: red;
}
...

/* 何行かの別の記述の後 */
...
.text-color-1 {
  color: blue;
}

この場合、”text-color-1″というクラスに対して color プロパティが重複して指定されています。
この時、最も後述である”blue”の方が適用され、文字の色は赤色ではなく青色になります。

親子関係と後勝ち

親要素(class=”1st”) + 子要素(class=”2nd”)の場合、
子要素は”1st”クラスを継承しますが、同格のセレクターである”2nd”クラスが後述なので”2nd”が優先されます。

<style>
    .1st {
        color: red;
    }
    .2nd {
        color:blue;
    }
</style>

<div class="1st">
    <p>継承した1stの色である"red(赤色)"になる</p>
    <p class="2nd">1stを継承しているが、その後述で2ndに上書きされるので"blue(青色)"になる</p>
    <div class="2nd">
        <p class="1st">最も下に記述されているクラスのため、1stが継承されその上書きの2ndが継承され、
                        さらにそれが1stに上書きされます。</p>
    </div>
</div>

というように、css ファイルのみだけでなく、html ファイルにおいても後に読み込まれるクラスが優先されます。CSS”言語として”の仕様ということになりますかね。

なので、１つの大きな要素のグループごとにネストの深い方に行けばいくほど、ネストを組む=親要素より下に記述される
ということになり、親要素 → 子要素 → さらにその子要素となっていてもしっかりとそれぞれのクラスはそれぞれに適用されることになります。

少し、実験をしてみましょう。先ほどのsample4_4-5を参考に書き足していきます。

<article class="text-black">
    <h2 class="yellow-blue">記事のタイトル</h2>
    <h3 class="text-red">見出し・キャッチコピー</h3> <!--ここ"text-red"を書き足します。-->
    <p>文章文章文章文章文章文章文章...
    ...

.text-black {
    color: black;
}
/* "text-red"クラスを書き足す。 */
.text-red {
    color: red;
}

sample_4-6
https://ezo-style.com/sample/sample-4-6.html

赤字に変化したでしょうか?

といった具合にこの強弱関係の仕様が一番、css内で理解するのに時間がかかる面倒な部分です。

しかし、逆にいうと押さえておきたい基礎はここでおしまいです。
この先は、ほぼ間違いなく使用するプロパティについて説明していきます。