css - css 疑似クラスセレクター

Question

:nth-childを使用して css でマークアップの 2 番目の div を選択したいのですが、うまくいきません。

プラグインによって生成されたこのマークアップがあります。

<div class="single-container">
                <div class="toggle-default">
                    <div class="toggle">
                    <div class="toggle_title toggle_active">FIRST</div>
                    <div class="toggle_content" style="display:block;">Lorem ipsum sit dolor amet</div></div>

                    </div>

    <div class="toggle-default">
                    <div class="toggle">
                    <div class="toggle_title toggle_active">SECOND </div>
                    <div class="toggle_content" style="display:block;">Lorem ipsum sit dolor amet</div></div>

                    </div>



    <div class="toggle-default">
                    <div class="toggle">
                    <div class="toggle_title toggle_active">THIRD </div>
                    <div class="toggle_content" style="display:block;">Lorem ipsum sit dolor amet</div></div>

                    </div>


    </div>

私はこれを試しました：.toggle-deafult .toggle:nth-child(2) { background:red; }そしてこれはうまくいきませ.toggle div:nth-child(2)ん。

誰かがこれで私を助けることができますか?

ありがとうございました ！

LATER EDIT: マークアップを変更しました。これは変更する必要があるものです:<div class="toggle_title toggle_active">SECOND </div>

Answer 1

.toggle-default:nth-child(2) .toggle_title{ background:#f00;}

変更するのは 2 番目のものです。

Answer 2

必要です( 2n.toggle-default:nth-of-type(2n) { color: red; }に注意してください)。

Answer 3

.toggle-default:nth-child(2) {
    background-color: red;
}