Стиль первый элемент легенды внутри вложенных полей

Question

Я пытаюсь стилизовать первый элемент legend внутри вложенных полей, но ни один из селекторов CSS, которые я использовал, не достиг того, что мне нужно.

http://codepen.io/anon/pen/epodxd

Я в принципе хочу, чтобы стиль первого элемента легенды без использования какого-либо дополнительного класса CSS, если это возможно.

<fieldset class="nested-parent"> 
    <legend>Parent</legend> 
    <input type="text" size="10" /> 

    <fieldset> 
     <legend>Child</legend> 
     <input type="text" size="20" /> 
    </fieldset> 
</fieldset> 

.nested-parent legend:first-child { 
    color: red; 
} 

Answer 1

Основываясь на HTML вы предоставили, вы можете использовать child selector, > для того, чтобы выбрать первый legend элемент, который является прямым потомком .nested-parent элемента:

.nested-parent > legend:first-child { 
    color: #f00; 
} 

I предположил бы вместо этого использовать :first-of-type pseudo class. Это будет более точно при работе с типами элементов.

Example Here

.nested-parent > legend:first-of-type { 
    color: #f00; 
}