Css селекторы дети

Question

Ниже мой html. Я хотел бы выбрать второй заголовок (класс) с именем класса embed. <div class="embed-container">test</div>

Я пробовал:

.feature-row .threecolumns .caption:nth-child(2) { 
 
    border: 1px solid red; 
 
}

<div class="col-md-12 relative feature-row" > 
 
    <div class="threecolumns"> 
 
     <div class="caption caption-feature-block relative" > 
 
      <div class="col-md-12 col-xs-12"> 
 
       <h4 >The Heart </h4> 
 
       <p >We asked ?"</p> 
 
       <div class="embed-container"></div> 
 
      </div> 
 
     </div> 
 
     <div class="caption caption-feature-block relative " > 
 
      <div class="col-md-12 col-xs-12"> 
 
       <h4 >See You Tomorrow</h4> 
 
       <p > takes top priority at A.</p> 
 
       <div class="embed-container">test</div> 
 
      </div> 
 
     </div> 
 
     <div class="caption caption-feature-block relative c" > 
 
      <div class="col-md-12 col-xs-12"> 
 
       <h4 >h4</h4> 
 
       <p > A .</p> 
 
       <div class="embed-container">embed2</div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>

Как я могу сделать это без присвоения идентификатора в DIV?

Answer 1

Ваш код работает нормально. Если вам нужно выбрать детскую .embed-контейнер, вы должны использовать это:

.feature-row .threecolumns .caption:nth-child(2) .embed-container 

Он работает: http://jsfiddle.net/jraef1cu/10

Answer 2

Вы отсутствовали имя класса после: п-го ребенка. Я думаю, что некоторые DIV не были закрыты.

.feature-row .threecolumns .caption:nth-child(2) .embed-container { 
     border:1px solid red; 

} 

http://jsfiddle.net/jraef1cu/11/