SASS/CSS: :first-child selector not working

Question

I'm trying to style a certain <div> in my markup with CSS/SASS, and I'm clueless as to why it's not applying the rules. This is my markup:

<div class="row addon-header">
    <div class="col-sm-3">
    // something here
    </div>
    <div class="col-sm-9">
        <h2>Title</h2>
        <h6><em>Slogan</em></h6>
        <div class="col-xs-1">
            // I want to access this
        </div>
        <div class="col-xs-1"></div>
        <div class="col-xs-1"></div>
        <div class="col-xs-1"></div>
    </div>
</div>

And this is the SASS I'm trying to use for it:

div.addon-header {
    color: white;
    > div.col-sm-9 > div.col-xs-1:first-child {
        background-color: black;
        padding-left: 0px !important;
    }
}

If I remove the :first-child selector in my SASS, it's working, but obvious for every <div class="col-xs-1"> not just the first one, which is not what I want.

I also tried playing around and doing something like

div.addon-header {
    color: white;
    > div.col-sm-9 > div.col-xs-1 {
        &:first-child {
            background-color: black;
            padding-left: 0px !important;
        }
    }
}

or

div.addon-header {
    color: white;
    > div.col-sm-9 {
        > div.col-xs-1:first-child {
            background-color: black;
            padding-left: 0px !important;
        }
    }
}

or using :nth-child(1) instead. Nothing works. I'm clueless. Somewhere else in my SASS, I have the following:

.tab-content {
    >.tab-pane:first-child > form > div.row > div {
        // rules here
        > div.picture-container {
            // rules here
        }
    }
    >.tab-pane {
        // rules here
    }
    >.tab-pane:nth-child(4) > form {
        // rules here
    }
}

Which is working just fine. So I really don't get what I'm doing wrong in the first example. Anyone able to help?

This is due to the way the `first-child` selector works, the `div` isn't the `first-child` the `h2` is. https://jsfiddle.net/qb2d66d4/1/ — Hidden Hobbes, Feb 16 '17 at 12:11

Shaggy · Answer 1 · 2017-02-16T19:20:40.530

1

You need the :nth-of-type() (or, in your case, the :first-of-type selector).

In the example your provided the :first-child of .col-sm-9 element is the h2.

div.addon-header {
    color: white;
    > div.col-sm-9 > div.col-xs-1:first-of-type {
        background-color: black;
        padding-left: 0px !important;
    }
}

Note, though, that the :nth-of-type() selectors, like the :nth-child() selectors, apply to tags only, not class names; if you were to insert another div before the first .col-xs-1 then this would no longer work.

edited Feb 16 '17 at 19:20

answered Feb 16 '17 at 12:14

Shaggy

6,696
2
25
45

Thanks, I ended up using @arturmoroz answer, because wrapping the cols in a row negates the need for `padding-left: 0px` altogether, so I save some CSS. But your answer worked as well. – Artemios Antonio Balbach Feb 16 '17 at 13:15

score 0 · Accepted Answer · answered Feb 16 '17 at 12:13

0

col-xs-1 need to wrap row because this block is not first element. First element is h2

answered Feb 16 '17 at 12:13

arturmoroz

1,897
1
16
13

SASS/CSS: :first-child selector not working

2 Answers2