css pseudoclass selector

Question

Я хочу выбрать второй div в моей разметке с помощью css, используя : nth-child, но я не могу заставить его работать.

У меня есть этот код, генерируемый плагин:

<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), но это не работает.

Может кто-нибудь помочь мне с этим?

Спасибо!

СПУСТЯ EDIT: Я изменил разметку, это то, что мне нужно изменить: <div class="toggle_title toggle_active">SECOND </div>

Answer 1

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

Это второй один, который вы хотите изменить.

Answer 2

Вам необходимо .toggle-default:nth-of-type(2n) { color: red; } (обратите внимание на 2n).

Answer 3

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