Ember.js breaks my css :first-child styles

I was trying to remove the top-margin from a heading inside a panel element (I’m using the Bootstrap css framework), so I whipped up this little bit of css and thought I would be on my way.

.panel-body h3:first-child {
    margin-top: 0;
}

At first I thought my asset pipeline was broken and my CSS wasn’t being regenerated after a change was made to my .css source files, or that somehow the :first-child CSS select was broken.

As it turns out, all those little <script type="text/x-placeholder"> metamorph thingamabobs were taking the place of the first-child element so the style wasn’t being applied to my heading. Luckily the fix is simple, replace your usage of the :first-child selector with CSS3’s :first-of-type pseudo-class to end up with this:

.panel-body h3:first-of-type {
    margin-top: 0;
}
comments powered by Disqus