SitePoint Sponsor

User Tag List

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

    first-child/last-child..

    can I do

    Code:
    header :first-child
    without specifying element?

    what if inside a header you have <a> and two <ul>'s??

    i.e.,

    Code:
    <header>
    
    <a>link</a>
    <ul>....</ul>
    <ul>...</ul>
    </header>
    how do I refer to the FIRST <ul>??? (2nd element inside <header>)

    thank you...

  2. #2
    SitePoint Guru
    Join Date
    Jun 2009
    Posts
    789
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    removed....

    bad question...

    sorry..... ;-)

  3. #3
    SitePoint Member
    Join Date
    Aug 2012
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by maya90 View Post
    can I do

    Code:
    header :first-child
    without specifying element?

    what if inside a header you have <a> and two <ul>'s??

    i.e.,

    Code:
    <header>
    
    <a>link</a>
    <ul>....</ul>
    <ul>...</ul>
    </header>
    how do I refer to the FIRST <ul>??? (2nd element inside <header>)

    thank you...
    header ul:first:child
    header ul:nth-child(2) --> 2nd UL from header

    Good Lucky.

  4. #4
    Mouse catcher silver trophy
    Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,822
    Mentioned
    110 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by maya90 View Post
    can I do

    Code:
    header :first-child
    without specifying element?
    Yes, that will target the first child of the <header>, no matter what it is.

    what if inside a header you have <a> and two <ul>'s??

    Code:
    <header>
    
    <a>link</a>
    <ul>....</ul>
    <ul>...</ul>
    </header>
    how do I refer to the FIRST <ul>??? (2nd element inside <header>)
    header ul:first-of-type will hit the first <ul> inside <header>, regardless of whether it's the first element or there are other children that come first.

    Quote Originally Posted by Thavo View Post
    header ul:first:child
    header ul:nth-child(2) --> 2nd UL from header
    The problem with that approach is that you need to know in advance how many older children there are, which makes it difficult to create a general stylesheet that will work flexibly with different content.

    header ul:first-child will only target a <ul> that is the first child of the <header> ... if the first child is not a <ul> then it won't apply at all.

  5. #5
    SitePoint Guru
    Join Date
    Jun 2009
    Posts
    789
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Code:
    Quote Originally Posted by Thavo View Post
    
    header ul:first:child
    header ul:nth-child(2) --> 2nd UL from header
    The problem with that approach is that you need to know in advance how many older children there are, which makes it difficult to create a general stylesheet that will work flexibly with different content.


    yes I was thinking the same thing, it's not too practical for when you don't know how many children there are because they're loaded dynamically...

    header ul:first-child will only target a <ul> that is the first child of the <header> ... if the first child is not a <ul> then it won't apply at all.
    I thought so... this is the crux of this thing.... ;-)


    thank you....

  6. #6
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,731
    Mentioned
    31 Post(s)
    Tagged
    0 Thread(s)
    header ul:first-child will only target a <ul> that is the first child of the <header> ... if the first child is not a <ul> then it won't apply at all.
    Which is why you need :first-of-type (of course, this means no support for IE <=8 )

  7. #7
    SitePoint Guru
    Join Date
    Jun 2009
    Posts
    789
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by dresden_phoenix View Post
    Which is why you need :first-of-type (of course, this means no support for IE <=8 )

    yep.... this is the other thing about these slick new CSS3 features, the spotty support for IE <=8, like you say..... one thing I love about these CSS3 features is it enables you to write cleaner, less verbose markup, which I think this is great, but with iffy support for IE<=8 they're not too practical or plausible... (now how about mobile???? I was very surprised recently to find some mobile browsers (Windows, Android) don't support some HTML5 tags.. so what about CSS3? do all mobile browsers support all CSS3 features or not?)

    thank you..


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
  •