SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Addict sdleihssirhc's Avatar
    Join Date
    Feb 2009
    Posts
    387
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    One More Quick nth-of-type Question

    Just so I can wrap my head around this, is there any difference between these two selectors:

    Code:
    li:nth-child(odd)
    li:nth-of-type(odd)

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,760
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    Nth of type is slightly more specific, but basically yes . You can read up on it more here
    http://reference.sitepoint.com/css/p...lass-nthoftype
    http://reference.sitepoint.com/css/pseudoclass-nthchild
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  3. #3
    SitePoint Addict sdleihssirhc's Avatar
    Join Date
    Feb 2009
    Posts
    387
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    The sitepoint references are where I got confused. On the nthoftype page, it says this:

    The following example selector matches the second, fifth, eighth, and so on, paragraphs in a div element, ignoring any children that aren’t paragraphs:
    Code:
    div>p:nth-of-type(3n-1) {
      ⋮ declarations
    }
    But wouldn't the following selector do the exact same thing:

    Code:
    div>p:nth-child(3n-1) {
      ⋮ declarations
    }

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,760
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    If I do believe so, the nth of type, in that example, would only select <p>'s in that rule, where as if you did nth-child it would select any element that came across taht 3n-1 calculation .

    Basically, nth-of-type will only select the element that it's connected to, where as nth-child will select whatever element it gets calculated to be
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  5. #5
    SitePoint Addict sdleihssirhc's Avatar
    Join Date
    Feb 2009
    Posts
    387
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    So even if I write "p:nth-child(N)", it will go with "*:nth-child(N)"?

    Ugh.

  6. #6
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,760
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    If the N in your example was a 3, it would select the third element in that, and if it's a <p> it would style it according to what you set.

    So if your HTML was setup for p:nth-child(N) (for it to select the <p>) then yes, doing *:nth-child(N) would select the same thing.

    This is really hard to explain. If you read their text you can get a clear idea.

    This example selector will match any paragraph that’s the first child element of its parent element

    p:nth-child(1) {
    }
    Kinda like first-child (this example from the reference)

    I do hope I am making sense.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  7. #7
    SitePoint Addict sdleihssirhc's Avatar
    Join Date
    Feb 2009
    Posts
    387
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Okay, okay, okay, let me muddle through it.

    Let's say I have a div with all kinds of children. Let's also say that I have a css rule I'd like to apply:

    Code:
    ___ {
        background:red;
    }
    If I use a selector of "div > *:nth-child(odd)", that will change the background of every other element, regardless of what kind of element it is, to red.

    If the selector is "div > p:nth-child(odd)", the background will only change on paragraphs that happen to be odd-numbered children of the div. If the third child is a span, the background will remain the same. If all of the odd children are paragraphs, then all of the paragraphs will have a red background.

    If the selector is "div > p:nth-of-type(odd)", then every other paragraph will have a red background. It doesn't matter what numbered-child the paragraph is of the div, only that it's the first or third (or fifth, or seventh, or etc.) paragraph in that div.

    Right?

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,549
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by sdleihssirhc View Post

    Right?
    Yes - I think you nailed it

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    /*div > p:nth-child(odd) {background:red}*/
    div > p:nth-of-type(odd) {
    background:blue
    }
    </style>
    </head>
    <body>
    <div>
        <p><span>test1</span><span>test2</span><span>test3</span><span>test4</span></p>
        <div>xxx</div>
        <div>xxx</div>
        <p><span>test4</span><span>test2</span><span>test3</span><span>test4</span></p>
        <div>xxx</div>
        <p><span>test1</span><span>test2</span><span>test3</span><span>test4</span></p>
        <div>xxx</div>
        <p><span>test1</span><span>test2</span><span>test3</span><span>test4</span></p>
        <p><span>test1</span><span>test2</span><span>test3</span><span>test4</span></p>
    </div>
    </body>
    </html>
    The above gives different results depending on which rule is active and confirms your findings


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
  •