CSS style first column different than other columns

Question

I need to make the first column look different than the other columns. The following style selector does not do what I want. Can someone show me how I can get my first column inside milestoneRow to be different from the other columns?

CSS

.milestoneRow {
    line-height: 55px;
}

.milestoneRow:first-child {
    line-height: 16px;
    margin-left: 10px;
    margin-right: -10px;
}

.milestoneRow:not(:first-child) {
    color: white;
    font-weight: bold;
}

HTML

<div class="row milestoneRow">
    <div class="col-md-1">
        1st Column <br />
        3 Lines <br />
        Closer Together
    </div>
    <div class="col-md-2">
        2nd Column
    </div>
    <div class="col-md-1">
        3rd Column
    </div>
    <div class="col-md-3">
        4th Column
    </div>
    <div class="col-md-3">
        5th Column
    </div>
    <div class="col-md-2">
        6th Column
    </div>
</div>

Answer 1

This code

.milestoneRow:first-child {
    line-height: 16px;
    margin-left: 10px;
    margin-right: -10px;
}

only applies if .milestoneRow is the first child.

You need to select the actual first child of milestoneRow using a descendant selector like so:

 .milestoneRow div:first-child {
        line-height: 16px;
        margin-left: 10px;
        margin-right: -10px;
    }