SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Evangelist
    Join Date
    Feb 2007
    Posts
    402
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Targeting first child div..

    Hi..

    I am trying to target the first child div within a specific wrapper in my html, to give it different styling to others, but am having difficulties, wondering if anyone can assist.

    At the moment, my html is as so...

    <div id="wrapper">
    <cfoutput query="my query">
    <div>
    #info#
    </div>
    </cfoutput>
    </div>

    So I have a query that loops through and outputs a seperate div for each database entry.

    Now what i would like to do, is have the first div on the screen..i.e, the latest entry from my database with a different background colour to the other divs..

    Essentially

    #wrapper div:first {
    background:blue
    }

    Any assistance would be appreciated..

    Many thanks
    discover song meanings and more http://www.music-explained.com

  2. #2
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    If the DIV is the first element (not just the first DIV) within #wrapper, then you can use the first-child pseudoclass.

    Otherwise, you can use the child selector:

    Code css:
    #wrapper > div {
      background:blue
    }
    But if there are any other DIVs alongside it (siblings), they will be targeted too.

    Also, these selectors aren't supported by IE6.

    If these will not work for you, the best idea is to simply give the DIV you want to target a class.

  3. #3
    SitePoint Evangelist
    Join Date
    Feb 2007
    Posts
    402
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes, it was the first child pseudoclass i was looking for

    Many thanks for your help
    discover song meanings and more http://www.music-explained.com


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
  •