энный Ребенок в CSS

Question

Я использовал п-й ребенок и раньше, но по какой-то причине не может предназначаться правильный DIV:

<div class='main'>...</div> 
    <div class='color'>...</div> 
    <div class='number'>...</div> 
    <div class='target_div'>...</div> 
     <div class='target_me_one'>...</div> 
     <div class='target_me_two'>...</div> 
<div class='main'>...</div> 
<div class='main'>...</div> 
<div class='main'>...</div> 
<div class='main'>...</div> 
<div class='main'>...</div> 
<div class='main'>...</div> 

Я надеялся на первое вхождение основной, второй ребенок основной (номер), первый ребенок числа (target_div), а затем оба дочерних объекта target_div.

Целью этого является изменение цели target_me_one/target_me_two от первого появления main. Я не могу настроить таргетинг на эти два отдельно с помощью селекторов (из-за подключаемого модуля).

Возможно ли это, или я ушел ???

Answer 1

Это будет делать то, что вы ожидаете, не полагаясь на классы для конкретных селекторов. Проверьте JSFiddle

 .main:first-of-type > *:nth-child(2) > *:nth-child(1) * { 
     color: red; 
     } 

Answer 2

Используйте «первый тип» вместо n-го ребенка.

вот jsfiddle: http://jsfiddle.net/m395kdxy/

.main:first-of-type .target_me_one { 
     background: #ff0000; 
    } 

    .main:first-of-type .target_me_two { 
     background: #ff0000; 
    } 

Пожалуйста, дайте мне знать, если он работает

Answer 3

У вас нет никаких дочерних элементов для выбора.

Что вы, вероятно, думаете о селекторе :nth-of-type.

.: например

.main{ 
    /* All */ 
} 

.main:nth-of-type(1){ 
    /* First */ 
} 

.main:nth-of-type(2){ 
    /* Second */ 
} 

See the documentation.

Как обычно, обратите внимание, что это не работает в IE < 9.