SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Thread: Time saving tip

  1. #1
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)

    Time saving tip

    OMG. I just wasted 2 hours staring at my screen with my eyes 6 inches from the screen saying to myself - p opened - p closed - div opened - div closed. Because I couldn't find the error. I was adding a div to my page and it fubared some margins. Finally I found it. It was this...

    #home #main .column:nth-of-type(3) {
    margin-right:0;
    }

    Apparently that does not mean class .column :nth-of-type. It means div:nth-of-type. I assumed it would only target the class. It does not - it targets the 3rd div. Maybe you already knew this. I did not.

    I wonder if that applies to :last-child too? tested - yes it does.

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi Eric,

    It's not quite as simple as that

    When you say .column:nth-of type(3) then the browser will first check what element has the class of .column applied ( there may be more than one type of element to take note of). If .column is applied to a p element for example then the browser will count from that the first p element (irrespective of its class) and find the third p element in sequence but will only apply the rule if that third element in sequence has a class of .column. It does not look for three .column classes but looks from the first p element and then finds the third of that type but only applies the rule if that third of type has the class.


    e.g.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style>
    #home #main .column:nth-of-type(3) { background:red; }
    </style>
    </head>
    
    <body id="home">
    <div id="main">
    		<div class="column">div class</div>
                    <div>test</div>
    		<div>div class</div>
    		<div class="column">div class</div>
    		<div class="column">div class</div>
    </div>
    </body>
    </html>
    Nothing in the above will get targeted because the third div in sequence doesn't have a class of column.

    However:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style>
    #home #main .column:nth-of-type(3) { background:red; }
    </style>
    </head>
    
    <body id="home">
    <div id="main">
    		<div class="column">div class</div>
                    <div>test</div>
    		<div class="column">div class</div>
    		<div class="column">div class</div>
    		<div class="column">div class</div>
    </div>
    </body>
    </html>
    In the above the third div will have a background of red but note that it is only the second instance of the .column class.

    So to recap the browsers first checks what element the class belongs to and then it finds the third of that element. If that third element doesn't have the same class then no match is made. There could also be other element intermingled in the above with a class of column and they would get selected on the same basis as above and each treated separately.

    At least that's how my tests and expectations show it working.
    Last edited by Paul O'B; Mar 1, 2013 at 10:34.

  3. #3
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Wow. I find that to be massively confusing. It will be a while until that is second nature for me.

    So when I was using it, I had 3 divs with class column. I was targeting the 3rd one with :nth-of-type(3)...

    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>

    Then I added another div up top with a different id.

    <div id="dif"></div>

    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>

    So then in order to target the 3rd column div I had to say :nth-of-type(4). Very confusing to me. Thanks for the explanation. I will read it a few more times in hopes more sinks in. I get it. But it will never be second nature to me.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Yes it is a bit confusing and not what I originally expected either .

    I need to further clarify a point in my explanation in that the browser looks at .column as sees that its applied to a div. It then counts from the first div in that section (irrespective of its class) and then finds the third div. If that third div doesn't have a class of .column then no match is made.


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
  •