desplay: none;とdesplay: block;での表示の切り替えについて

Question

前提・実現したいこと

「test」をクリックすると、非表示だった要素（This is a test)が表示されるようにしたいです。

display: none;への切り替えはできたのですが、display: block;への切り替えができません。
（表示されてたものを非表示にすることはできたのですが、非表示にされてたものを表示することはできなかったんです。）

デベロッパーツールを見てもエラーメッセージは出ていません。

色々なサイトを見ると、display: none;で非表示化したものを表示するにはblockに変更するとありましたが、うまくいきません。

どのようにすれば、解消されるのでしょうか。どなたか教えていただければ幸いです。

該当のソースコード

    <p id="test_btn" onclick="testbtn();">test</p>
    <div id="test_d">
      This is a test.
    </div>

#test_d{
  display: none;
}

.test_h{
  display: block;
}

function testbtn(){
  const test = document.getElementById('test_d');
  test.classList.add('test_h');
}

試したこと

下記のCSSであれば動作しました。（表示から非表示にする動作）
id="test_d"は最初から表示させるために、何もCSSを適用していません。
また、HTML、javascriptのコードも上記より変更していません。

/クリックしたら非表示にする/
.test_h{
display: none;
}

Answer 1

CSSセレクタには「詳細度」と呼ばれる優先順位があり、提示されたコードでは #test_d の方が .test_h より詳細度が高いため、双方のルールセットで同じプロパティが指定されていると #test_d の方が優先されます。

修正するには、後者のセレクタの詳細度を上げるか、後者のプロパティに !important を付けます。

#test_d.test_h {
  display: block;
}

.test_h {
  display: block !important;
}

前者のセレクタの詳細度を下げてもいいですね。

<div class="test_d">

.test_d {
  display: none;
}

Comments

[mariposa]

int32_tさん
ご回答ありがとうございます。詳細度というものは知らなかったので大変勉強になりました。さまざま詳細度を変更する方法も記載いただきありがとうございます！

Answer 2

test.style.displayを調べることによって、displayが'block'か'none'かが分かります。
ですので、それをif文の条件にして作るといけます。以下に一部を書いてみました。
これにblockのときも追加すればできるはずです。

if(test.style.display == 'none'){
  test.classList.add('test_h');
}

（訂正）
一部読み間違えていたので訂正します。多分int32_t様が書かれているほうが質問の答えとして適当だと思われます。testボタンを押して、ついたり消したりさせたいのかと勘違いしていました。あと、test_hはclassじゃないので提示したコードも誤りですね。失礼しました。

Comments

[mariposa]

Sparrow42さん
ご回答ありがとうございます。初めての投稿だったのでご連絡頂いてとても嬉しいです！
私の文章の書き方が伝わりにくく失礼しました。
if文も勉強になります！ご丁寧にありがとうございました。

[Sparrow42]

いえいえ、解決できて何よりです????