CSSの詳細度について

皆さんこんにちはr.matsumotoです。

今回も前回に引き続きCSSで気になったところを紹介したいと思います。

今回紹介するのはCSSの詳細度についてです。

まず初めに見てもらいたいのが下のCSSです。

#btn {
  display: inline-block;
  width: 70px;
  height: 30px;
  background: #668ad8;
  color: white;
}

.disabled{
  background: #f5f5f5;
}

#btn {

display: inline-block;

width: 70px;

height: 30px;

background: #668ad8;

color: white;

}

.disabled{

background: #f5f5f5;

}

これはJavaScriptでdisabledクラスをつけ外ししてスタイルを整えようとしたのですが、

上のコードでは上手くいかず調べているとCSSには詳細度というものがあり

同じプロパティに異なる値が設定されている場合は詳細度が高いほうが優先されるようです。

ちなみにidとclassではidの方が詳細度が高く優先されるためdisabledのbackgroundが反映されなかったみたいです。

#btn {
  display: inline-block;
  width: 70px;
  height: 30px;
  background: #668ad8;
  color: white;
}

#btn.disabled{
  background: #f5f5f5;
}