SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Guru
    Join Date
    Jun 2009
    Posts
    825
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    css3 prob -- first:child selector

    http://mayacove.com/mobile/test_mobile.html

    I have color borders around first section, "Languages & Software" and a color border around the paragr inside it...
    (in real situation hide and show sections dynamically under those three headers, that's why headers are links, but made them all visible here since this is just for testing...)

    Code:
    body.skills .wrapper:first-child { border:solid 1px green; }
    body.skills .wrapper:first-child section {border:solid 1px red; }
    (lines 98 & 99 in stylesheet.... http://mayacove.com/mobile/style.css)

    but for some very odd reason these are being ignored.... don't get why... I have first:child selector elsewhere in this stylesheet w/no probs..

    I even validated this little bit of css, it validates... would appreciate suggestions..

    thank you....

  2. #2
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,609
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    Instead of wrapper:first-child
    try wrapper:first-of-type
    and see if that works for you.

  3. #3
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,117
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    first-child only targets an element if it is the first child in a parent element. As in there's no previous siblings before it.
    The only thing you can target out of these elements with first-child is the very first link at the top.

    HTML Code:
    <body class="skills">
      <a name="top"></a>
      <header></header>
      <ul id="nav_top" class="nav"></ul>
      <ul id="nav_main" class="nav"></ul>
      <div class="wrapper"></div>
      <div class="wrapper"></div>
      <div class="wrapper"></div>
      <div id="wrapper_top_link"></div>
    </body>

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,319
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    You could even use something like

    Code:
    .nav + .wrapper {
      border:solid 1px green;
    }
    That would target just the first .wrapper div.

  5. #5
    SitePoint Guru
    Join Date
    Jun 2009
    Posts
    825
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    I don't get this... I can't target this first <div class="wrapper"> inside the body tag with :first-child selector??????

    (this is in reply to markbrown4 (why don't replies appear beneath post you're replying to?? ;-)

    PS: nth-child(x) is also not working... I just don't get this.... :-(

    body .wrapper:nth-child(1) section {border:solid 1px red; } --> not working...

    my gosh and I thought this was supposed to be such a big deal with CSS3.... (???)

  6. #6
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,609
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    The first-child within <body class="skills"> is <a name="top>. It is the topmost element within <body class="skills">. first-child = topmost inner element.

    <div class="wrapper"> may be the first of a series of <div class="wrapper">s, but it is not the first-child. It is not the topmost inner element. To target the first <div class="wrapper"> you can use one of the other aforementioned methods (none of which were "first-child").

    Ralph's recommendation of the adjacent sibling selector is probably the best since it is IE8 friendly.

    nth-child(1) will not work for the same reason that first-child will not work.

    nth-child(5) should work because the first <div class="wrapper> is the fifth child in <body class="skills">

  7. #7
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,117
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by maya90 View Post
    Why don't replies appear beneath post you're replying to?
    "Reply With Quote" is the best way to tie a response to something specific.
    Quote Originally Posted by maya90 View Post
    I don't get this... I can't target this first <div class="wrapper"> inside the body tag with :first-child selector??????

    my gosh and I thought this was supposed to be such a big deal with CSS3.... (???)
    Before first-child and last-child a lot of people were adding classes to those items, as you often want to style them differently.
    HTML Code:
    <ul>
      <li class="first">first</li>
      <li>another</li>
      <li>another</li>
      <li>another</li>
      <li class="last">last</li>
    </ul>
    If you need to style your first container differently just add a class.

  8. #8
    SitePoint Guru
    Join Date
    Jun 2009
    Posts
    825
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    yes I know I can add a class.. I just thought that with CSS3 we wouldn't need to add so many classes anymore, because we now have these first/last-child & nth-child selectors (esp for mobile, where browser support is not an issue..) still don't get why this doesn't work...

    so what's the point of those selectors then, if they don't always work.. (they work for me only sometimes... for ex something like
    Code:
    div p:last-child
    will work, but not example I posted here.. I just don't get this...

    ok...

    thank you...

  9. #9
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,117
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by maya90 View Post
    yes I know I can add a class.. I just thought that with CSS3 we wouldn't need to add so many classes anymore, because we now have these first/last-child & nth-child selectors (esp for mobile, where browser support is not an issue..) still don't get why this doesn't work...

    so what's the point of those selectors then, if they don't always work.. (they work for me only sometimes... for ex something like
    Code:
    div p:last-child
    will work, but not example I posted here.. I just don't get this...

    ok...

    thank you...
    Perhaps third time lucky
    first-child and last-child work every time for the specific case they target.

    They target the first and last elements within a parent ( the first and last li elements above )
    HTML Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>untitled</title>
    <style>
    li:first-child { background: red }
    li:last-child { background: blue }
    </style>
    </head>
    <body>
    <ul>
      <li>first</li>
      <li>another</li>
      <li>another</li>
      <li>another</li>
      <li>last</li>
    </ul>
    </body>
    </html>

  10. #10
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,319
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by maya90 View Post
    why don't replies appear beneath post you're replying to?
    Because this isn't Stack Overflow. Replies are ordered according to when they were posted.

    Quote Originally Posted by maya90 View Post
    I just don't get this...
    ronpat gave you a very clear explanation of where you are going wrong, with an example of how nth child needs to be used for your example. Make sure to read all replies since your last one.


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
  •