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>

Possible duplicate of [CSS selector for first element with class](http://stackoverflow.com/questions/2717480/css-selector-for-first-element-with-class) — TylerH, Oct 13 '15 at 16:27
Not the accepted answer ^ but the most-upvoted one by BoltClock answers your question. — TylerH, Oct 13 '15 at 16:28
Not a duplicate as indicated...the OP is actually trying to select the first child. The class has no relevance here. — Paulie_D, Oct 13 '15 at 16:28
@Paulie_D Yep, and the second paragraph of BoltClock's answer explains `:first-child`, which is what OP needs. — TylerH, Oct 14 '15 at 13:36

score 3 · Accepted Answer · answered Oct 13 '15 at 16:14

3

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;
    }

answered Oct 13 '15 at 16:14

Paulie_D

107,962
13
142
161

So, if I understand it, I was missing the first child of milestoneRow (the div). Thanks. – Wannabe Oct 13 '15 at 16:26
Exactly...your original code was only applicable if the `.milestoneRow` div was a first child. So it wasn't selecting any child divs of the parent at all. – Paulie_D Oct 13 '15 at 16:27

CSS style first column different than other columns

1 Answers1