【CSS】CSSのスタイルが効かないとき〜カスケード・詳細度・継承〜

はじめに

CSSのスタイルが効かないときはカスケード・詳細度・継承が原因となることが多くあるので、まずは疑ってみるとよいです。スタイルの優先度を忘れていたりすると解決に時間がかかったりします。
今回カスケード・詳細度・継承についてまとめましたので、CSSのスタイルが効かないとき思い出してみてください。

カスケードとは

• CSSの順序
• MDNドキュメント　カスケード
• 基本的にはあと勝ちと考えておけば良い

下記のコードの場合、後に書いたh1{color: blue;}が適用される

html

<h1 id="title" class="a b c d e f g h i j k">h1タグです</h1>

css

h1 {
  color: red;
}

h1 {
  color: blue;
}

詳細度

• 詳細度のスコアリングでCSSの適用されるものが変わる
• MDNドキュメント 詳細度のスコアリング

html

<h1 id="title" class="a b c d e f g h i j k">h1タグです</h1>

下記のコードの場合、詳細度のスコアが高い.a{color: blue;}が適用される

css

h1 {
  color: red;
}

.a {
  color: blue;
}

h1 {
  color: yellow;
}

カスケードの計算を無効化する!important

• スタイルに!importantをつけると、カスケードの計算を無効化し、重要とする
• MDNにも書いてあるが、基本的には使わないほうが良い
• MDNドキュメント !important

html

<h1 id="title" class="a b c d e f g h i j k">h1タグです</h1>

下記のコードの場合、!importantを書いたh1{color: yellow !important;}が適用される

css

h1 {
  color: red;
}

.a {
  color: blue;
}

h1 {
  color: yellow !important;
}

継承について

• 継承とは、親要素から子要素へプロパティ値を引き継ぐこと
• inherit: 親要素から子要素へプロパティ値を引き継ぐ
• initial: ブラウザの持っているデフォルト値をスタイルに当てる
• unset: inheritがあれば、inheritが適用される。なければ、initialが適用される

html

<ul>
      <li>リンク →<a href="https://www.kddi.com/">KDDI</a></li>
      <li>リンク →<a href="https://www.nttdocomo.co.jp/">DOCOMO</a></li>
      <li>リンク →<a href="https://www.softbank.jp/">ソフトバンク</a></li>
</ul>

css

li {
  color: red;
}

li a[href*="kddi"] {
  color: inherit;
}

li a[href*="docomo"] {
  color: initial;　←　黒になる
}

li a[href*="soft"] {
  color: unset;
}

すべてのプロパティの値をリセットする

• all: unset;を使うとプロパティの値をリセットできる

html

<div class="fix">こちらはdivタグです。</div>

css

div {
  background-color: orange;
  border: 3px solid black;
}

.fix {
  all: unset;
}