css pseudoclass selector

Question

I want to select the second div in my markup with css using :nth-child but I cannot make it work.

I have this markup generated by a plugin:

<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>

I've tried this : .toggle-deafult .toggle:nth-child(2) { background:red; } and this .toggle div:nth-child(2) but it's not working.

Can someone help me with this ?

Thank you !

LATER EDIT: I've modified the markup, this is what I need to modify : <div class="toggle_title toggle_active">SECOND </div>

Answer 1

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

It is the second one which you want to modify.