CODEWITHSUNDEEP
htmlcsscss-selectors
TCD Factory
TCD Factory

Reputation: 2524

have no idea why :first-child is not working as expected

I'm under the impression that :first-child will select an element if that element is the first-child of the parent... such as h1:first-child should select the h1 IF it is the first child of its parent. However I have that situation and it doesn't seem to be working or even being considered by the browser (it just doesn't show up in code inspector in chrome).

My code is as following:

HTML:

<html>
<body>
<div>
<h1>Sample Header</h1>
</div>
</body>
</html>

CSS:

h1 {
margin:20px 0;
}

h1:first-child {
margin-top:0;
}

Yet, it still has the 20px margin on the top. The h1 IS the first child of that div... so why is that not working?

EDIT: It doesn't have anything to do with the body tag etc, I know that if left alone the body tag by default has a margin.

Here is a link to the problem site because I tried what I posted here in a separate html file and it DID work... yet here in the sample I will link it is NOT working:

http://www.thecreativedesignfactory.com/test/index.html

Also I don't want to use :first-of-type because it's not supported by IE 7 - 8. :first-child is a better solution for that.

You might not see any css stating :first-child in the inspector... because it's simply not recognizing it's there. I DO actually have this line in the template.css file:

h1:first-child, h2:first-child, h3:first-child, h4:first-child, h5:first-child, h6:first-child, {
    margin-top:0;
}

Upvotes: 0

Views: 1111

Answers (1)

Stas Bichenko
Stas Bichenko

Reputation: 13263

You have a typo in your CSS

.inner-padding h1:first-child, .inner-padding h2:first-child, .inner-padding h3:first-child, .inner-padding h4:first-child, .inner-padding h5:first-child, .inner-padding h6:first-child**,** {
    margin-top:0;
}

Remove the last comma in the selector (otherwise it's not valid and not parsed). Fiddle: http://jsfiddle.net/yGgXP/

Also, next time, please make a jsFiddle for your question!

Upvotes: 1

Related Questions