SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Member
    Join Date
    Nov 2008
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Exclamation Pseudo Class :first-child Problem

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

    Code HTML4Strict:
    <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:

    Code 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. #2
    SitePoint Wizard drhowarddrfine's Avatar
    Join Date
    Aug 2005
    Posts
    3,438
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #3
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by fewzm View Post
    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.
    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:
    Code 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;
    }
    Birnam wood is come to Dunsinane

  4. #4
    SitePoint Member
    Join Date
    Oct 2008
    Location
    Nigeria
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AutisticCuckoo View Post
    If you want to restrict the rule to the first paragraph in .content, use a child combinator instead of a descendant combinator:
    How do I learn when to use child combinator in place of descendant combinator. Any text recomendationtion?

  5. #5
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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:
    Code CSS:
    #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.
    Birnam wood is come to Dunsinane

  6. #6
    SitePoint Member
    Join Date
    Nov 2008
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AutisticCuckoo View Post
    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.
    Here is the markup again:

    HTML Code:
    <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!

    Thanks.

  7. #7
    SitePoint Member
    Join Date
    Nov 2008
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AutisticCuckoo View Post
    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:
    Code 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;
    }

    HA!!! IT WORKED!!!

    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!!!


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •