Мне нужна помощь с использованием CSS-селекторов first-child и last-child

Question

У меня есть три столбца макета, вложенных в строку. Я хочу добавить границу справа от каждого столбца, кроме последнего. Я также хочу удалить левый отступ и заменить его левым полем из первого столбца, удалить правый отступ и заменить его правым полем из последнего столбца. Я пытался использовать селекторы first-child и last-child, но они не работают.

Кто-нибудь может указать мне правильное направление?

#row {
}

.box {
    border-right: 1px dotted #e1e1e1;
    margin: 0;
    padding: 0 10px;
    width: 139px;
}

#row div:first-child {
    padding-left: 0;
    margin-left: 10px;
}

#row div:last-child {
    border-right: 0;
    margin-right: 10px;
    padding-right: 0;
}

<div class="row">

    <div class="box">
        <h3>First Title</h3>
        <div>Stuff</div>
    </div>

    <div class="box">
        <h3>Middle Title</h3>
        <div>Stuff</div>
    </div>

    <div class="box">
        <h3>Last Title</h3>
        <div>Stuff</div>
    </div>

</div>

Answer 1

потому что row это класс, а не идентификатор.измените свой CSS на:

.row {
}

.box {
    border-right: 1px dotted #e1e1e1;
    margin: 0;
    padding: 0 10px;
    width: 139px;
}

.row div:first-child {
    padding-left: 0;
    margin-left: 10px;
}

.row div:last-child {
    border-right: 0;
    margin-right: 10px;
    padding-right: 0;
}

Answer 2

А как насчет стилизации всех столбцов одинаково и предоставления контейнера отрицательного поля с правой стороны?

Демо: jsfiddle.net / Marcel / aqmjn

Answer 3

#row div:last-child {
    border-right: 0;
    margin-right: 10px;
    padding-right: 0;
}

Этот блок кода относится к последнему

<div>stuff</div>

.Вы ссылаетесь на детей выбранного вами элемента div.

То, что вы хотите, это

.row:last-child