Pseudo Class :first-child Problem

Get Started
1

I have a problem with :first-child not rendering properly in many browsers. I’m most concerned about Firefox here… Here is the markup:

<div class="content">
<p>Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo. Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est,</p>
<p>Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est,</p>
<p>Sed ut perspiciatis</p>
<blockquote><p>This is broken!</p></blockquote>
</div>

The CSS:

.content p:first-child:first-letter {
    color:#CC0000;
    display:inline;
    float:left;
    font-size:5.4em;
    line-height:0.8em;
    margin:0.13em 0.14em 0 0;
    text-transform:uppercase;
}
.content p:first-child:first-line {
    font-size:1.2em;
    font-variant:small-caps;
}

My problem is that the CMS wraps the content of the blockquote in p, and the CSS above, for some weird reason changes that too, instead of being limited to the first-child.

I’d appreciate a solution to this, ‘cause I’m at my wits’ end.
Thanks.

2

The only browser that doesn’t handle those classes properly is IE.
Putting that <p> where it is doesn’t help matters since the classes use the DOM to locate elements so I don’t know what can be done (and I’m going to bed so I’m too groggy to think anyway).

3

That’s completely correct behaviour. Your selector matches every p element that is a descendant of .content and also the first child of its parent. The paragraph in the blockquote is a descendant of .content and it’s the first child of its parent, so the selector will match.

If you want to restrict the rule to the first paragraph in .content, use a child combinator instead of a descendant combinator:

.content>p:first-child:first-letter {
    color:#CC0000;
    display:inline;
    float:left;
    font-size:5.4em;
    line-height:0.8em;
    margin:0.13em 0.14em 0 0;
    text-transform:uppercase;
}
.content>p:first-child:first-line {
    font-size:1.2em;
    font-variant:small-caps;
}
4

How do I learn when to use child combinator in place of descendant combinator. Any text recomendationtion?

5

A child combinator (>) matches only immediate children, not grandchildren, great-grandchildren etc like a descendant combinator (white space).

You use a child combinator when you only want to match child elements, not elements that are subordinate to the child elements.

For instance, if you have a list with id="foo" which have nested lists, and you want to specify a style only for the top-level list items:

#foo>li {
  /* declarations for top-level items */
}

If you were to use #foo li as the selector, it would match all descendant list items, including those in the nested sub-lists.

Note, however, that IE6 and older don’t support child combinators.

6

Here is the markup again:

<div class="content">
	<p>First-child of class="content"</p>
	<p>...</p>
	<p>...</p>
	<blockquote>
		<p>Grandchild of class="content", so the CSS should *NOT* apply here!</p>
	</blockquote>
</div>

So, the way I see it the first p is the first-child, blockquote is the 4th child, while the p inside the blockquote is a grandchild of class=“content”. Right???

Well, if I am wrong, then using first-child is pretty much useless. I looked at loads of sites on the net, and none of them used it. Instead I saw span hacks, and even some guy who went to all the trouble to make a table with all the letters of the alphabet, each with its own CSS rules, just to implement a lousy dropcap! :mad:

Thanks.

7

HA!!! IT WORKED!!! :smiley:

Sorry, I didn’t notice the >, so I replied before fully understanding your reply.

I still can’t believe it works, lol! I spent about a week trying different things and ripping my hair out.

Thanks a lot!!!