我需要使用第一个和最后一个CSS选择器的帮助

Question

I have a three column layout nested within a row. I want to add a border to the right of every column except the last one. I also want to remove the left padding and replace it with a left margin from the first column, and remove the right padding and replace it with a right margin from the last column. I tried using the first-child and last-child selectors but they don't work.

Can anyone point me in the right direction?

#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

it is because row is a class not an id. change your css to:

.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

What about styling all the columns the same and giving the container negative margin on the right side?

Demo: jsfiddle.net/Marcel/aqmjn

Answer 3

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

This block of code is in reference to the last

<div>stuff</div>

. You are referencing the children of the div you are selecting.

What you want is

.row:last-child