Почему этот CSS: селектор первого ребенка не работает?

Question

Я работаю над проектом Asp.Net MVC 3 и наткнулся на кирпичную стену о том, почему это не работает так, как мне кажется.

Моя разметка:

<fieldset>
    <input type="hidden" value="2">
    <div class="editor-label"> 
        <label for="Name"> Name</label>
    </div>
    ...
</fieldset>

Мой css:

.display-label, .editor-label
{
    margin: 0.8em 0 0 0;
    font-weight: bold;
    display: inline;
}

fieldset > div:first-child
{
    margin: 0;
}

Все, что я хочу сделать, это сделать так, чтобы первый div в наборе полей имел отступ 0. Я думал, что селектор fieldset > div:first-child будет применять стиль к «первому дочернему элементу набора полей, тип которого является div», но, очевидно, что-то ускользает от меня.

Я пробовал это в IE9 / FF / Chrome, так что это не старый браузер, мешающий моим селекторам.

Спасибо.

Answer 1

fieldset > div:first-child означает «выбрать первый дочерний элемент fieldset , если это div».

Это не означает «выберите первый div в fieldset».

Первый ребенок в этом случае - <input type="hidden" value="2">.

Чтобы выбрать этот div без изменения HTML, вам нужно использовать fieldset > div:first-of-type.

К сожалению, хотя :first-child широко поддерживается, :first-of-type работает только в IE9 + и других современных браузерах.

Итак, в этом случае лучшее решение - продолжить использовать fieldset > div:first-child и просто переместить <input type="hidden" value="2">, так что это не первый ребенок.