CSSのdisplay: noneが効かない!どうしよう?

こんにちは、さるまりんです。

CSSで要素を隠すときこんな風に指定します。

.hide-this {
    display: none;
}

でも要素にhide-thisを指定しても消えないなんてことがあります。

なんで効かないの?

これは他の場所で指定されているdisplay: blockinline-blockが優先されているからです。

ではどうしましょう?

この指定の優先順位を上げる必要があります。

簡単に行うには!importantをつけます。

.hide-this {
    display: none !important;
}

これで優先順位を上げて要素を隠すことができます。

あれ?と思ったらその理由を探してみるのは勉強になりますね。

読んでくださってありがとうございました。

それではまた!