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

8476 ワード
HTML 初心者 CSS JavaScript HTML テキストリンク

はじめに

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

カスケードとは

下記のコードの場合、後に書いた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;
}

詳細度

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;
}
C++実現テラリアを考えてもいいですか?
PAT A 1064 Complete Binary Search Tree(30分)