下に記述した内容が上書きされ、優先される

【基礎編】
以下の図とコードで解説いたします。

<div class="box">

 <div class="box__inner">

  <div class="box__body box1 bg-blue">box1</div>

  <div class="box__body box2 bg-black">box2</div>

 </div><!-- /.box__inner -->

</div><!-- /.box -->

.bg-blue {
  background-color: #3898e0;
}

.bg-black {
  background-color: #323232;
}

.box {
  border: 1px solid #d5dfef;
}
.box__inner {
  justify-content: center;
  padding: 50px 0;
}
.box__body {
  width: 300px;
  height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #FFFFFF;
  font-size: 1.5em;
}
.box .box1 {
  margin: 0 auto;
}
.box .box2 {
  margin-top: 20px;
  margin: 0 auto;
}

以下の図は上記コードの内容です。
問題点として28行目から31行目において、box1とbox2の間にmargin-top: 20px;の余白が適応されていません。

この場合、後に記述した margin: 0 auto;は上下左右にmarginが適応されます。つまり、先に設定した margin-top: 20px; は上書きされることにより、margin-top: 20px;が効かなくなります。もしmargin-top: 20px;を適応するためには以下のように記述します。

margin: 0 auto;
margin-top: 20px;

これにより、margin-top: 20px;も適応されることとなります。基本的なことですが、重要な内容になります。

【応用編】
以下は誤った配置の例です。

<link href="./stylesheets/style.css" rel="stylesheet" />
<link href="./stylesheets/reset.css" rel="stylesheet"/>

reset.cssはデフォルトのデザインを初期化するためのCSSファイルです。ただし、上記の配置ではreset.cssが自身が作成したデザインを上書きしてしまい、正しく表示されなくなる可能性があります。

<script src="js/index.js"></script>
<link href="./stylesheets/style.css" rel="stylesheet" />

jsファイルの読み込みは、通常はHTMLの読み込みが完了してから行うことが推奨されています。これにより、レンダリングが妨げられず、スムーズなページロードが実現できます。上記の配置では、HTMLファイルの前にjsファイルが配置されているため、サイトの読み込みスピードに影響を及ぼしてしまいます。そのため、jsファイルはタグの閉じタグの直前に配置することが推奨されています。

クラスの詳細度を理解する

先述の内容では、一般的な優先度について述べましたが、それに当てはまらない詳細度という特殊なケースが存在します。
以下はCSSの詳細度について、具体的なコード例を通じて深く理解していきましょう。

1．クラスセレクタのみの場合:

.my-class {
  color: red;
}

この場合、.my-classクラスの詳細は１です。

2.タグセレクタとクラスセレクタの組み合わせの場合:

div.my-class {
  color: red;
}

この場合、div.my-classの詳細度は10です。タグセレクタは1の詳細度を持ち、クラスセレクタは10の詳細度を持つため、組み合わせることで詳細度が加算されます。 なお、次の例は記述は似ていますが内容はまったくの別のものになりますので注意が必要です。※詳細はこちらの子孫セレクタについてを参照ください。

3.親子セレクタとクラスセレクタの組み合わせの場合:

div .my-class {
  color: red;
}

この場合、div  .my-classの詳細度は11です。親子セレクタは10の詳細度を持つため、組み合わせることで詳細度が加算されます。divと.my-classの間にスペースを入れるとdivの中の.my-classという意味になります。

4.IDセレクタとクラスセレクタの組み合わせの場合:

#my-id .my-class {
  color: red;
}

この場合、#my-id  .my-classの詳細度は101です。IDセレクタは100の詳細度を持つため、組み合わさることで詳細度が加算されます。

これらは一部の例ですが、セレクタの種類や組み合わせによって詳細度が変化します。詳細度が高いほど、そのスタイルが適用されやすくなります。詳細度が同じ場合は、後に指定されたスタイルが優先されます。詳細度の理解と適切な使用は、CSSスタイル設計や競合の解決に重要です。

【応用編】
以下のHTMLコードを考えます:

<div id="container">
  <p class="text">Hello, world!</p>
</div>

そして、以下のCSSコードが適用されるとします:

#container p.text {
  color: blue;
}

p {
  color: red;
}

この場合、<p>要素のテキストの色はどのようになるでしょうか？
まず、セレクタ#container p.textはIDセレクタ#containerとクラスセレクタp.textの組み合わせで構成されています。IDセレクタはクラスセレクタよりも詳細度が高いため、詳細度は101となります。

一方、セレクタpは単独のタグセレクタであり、詳細度は1です。
詳細度の高いスタイルが適用される原則に従うと、<p>要素のテキストの色は青になるはずです。つまり、color: blue;が適用されます。詳細度によっては下に記述した内容も上書きされないことに注意が必要です。

親子関係と継承について理解する。

【基礎編】
HTMLとCSSを使用した簡潔な例です。
HTML:

<div class="parent">これは親要素です。
  <div class="child">これは子要素です。
   <div class="grandchild">これは孫要素です。</div>
  </div>
</div>

以下のようになります。
こちらの要素全てに対して、font-size: 20px;color: #3898e0;text-align: center;を適応するために継承を利用した指定を考えて見てください。

答えは親要素に以下の指定を記述します。
CSS:

.parent {
  color: #3898e0;
  font-size: 20px;
  text-align: center;
}

このように親要素に指定した内容が継承され、全ての要素に適応されていることがわかります。

もう一つ今度はプロック要素とインライン要素を組み合わせたときの挙動にについて見てみましょう。※ブロック要素とインライン要素についてこちらをご参照ください。

<div class="box">
  <div class="box__inner wrap-200">
    <img src="./images/icon/html.png" alt="">
  </div>
</div>

以下が表示されます。
そこで、この親要素にtext-aligh: center;を指定ときの挙動について考えてみましょう。

.box {
  text-align: center;
}

答えは以下のようになります。

imgタグは本来インライン要素ですので、直接text-align: center;を指定しても中央に配置されません。しかし、ブロック要素の子要素として配置することで、親要素の指定が適用され、中央に配置されるようになります。