Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    Regular Coder
    Join Date
    Jul 2005
    Posts
    131
    Thanks
    21
    Thanked 0 Times in 0 Posts

    problems understanding :first-of-type

    Im trying to get my head about how to format the css to achieve the desired effect.

    I have a section with news, and i want the first instance to be say 200px high, and all the rest 100px for example.
    I've tried a handful of variations on where to place the :first-of-type, and its never right.

    So i'd assumed i wanted to write something like:
    PHP Code:
    <style type="text/css">
    .
    f605                width:603px;  }
    .
    c605                width:585px;  }

    #webnews .c605.rounded:first-of-type      { background-color: yellow; }     
    #webnews .c605.rounded                    { background-color: green; }  
    </style>

        <
    div id="webnews" class="f605">
            <
    div class="c605 notrounded">Website News</div>
            
            <
    div class="c605 rounded">
                <
    p>Lorem ipsum dolor sit ametconsectetur adipiscing elitQuisque vel justo sed ligula vulputate adipiscing.</p
            </
    div>
            
            
            <
    div class="c605 rounded">
                <
    p>Lorem ipsum dolor sit ametconsectetur adipiscing elitQuisque vel justo sed ligula vulputate adipiscing.</p
            </
    div>

            <
    div class="c605 rounded">
                <
    p>Lorem ipsum dolor sit ametconsectetur adipiscing elitQuisque vel justo sed ligula vulputate adipiscing.</p
            </
    div>        
        </
    div
    What i dont understand is why the row <div class="c605 notrounded">Website News</div> breaks the code. If i change that from 'notrounded' to 'rounded' or nothing, then suddenly i get 1 yellow box and the rest green, which is what i'd expect.
    Why isnt it only acting on the first instance of a match, and painting that yellow, rather than seemingly seeing 1 similar instance, deciding its wrong, and then refusing to act on the first match.
    It doesnt paint it green or yellow, nor would i expect it to, because it doesnt match, so why is it clashing with it and stopping any instance from being yellow?

    the c605/f605 values arent important here, but they are on the proper layout i've just stripped as much away to try and eliminate potential issues.

    what is it im missing/misunderstanding?

  • #2
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    I believe :first-of-type only works for elements (div), not classes.

    http://reference.sitepoint.com/css/p...ss-firstoftype

    This pseudo-class matches the first child element of the specified element type, and is equivalent to :nth-of-type(1).
    There is no workaround other than separating the content (which should have been done instead of using selectors):

    Code:
    .section .c605.rounded:first-child {
    
    }
    Code:
    <div id="webnews" class="f605"> 
        <!-- "Website News" is a heading -->
        <h2 class="c605 notrounded">Website News</h2>
        
        <!-- This is a section of the heading -->
        <div class="section">
            <div class="c605 rounded"> 
                 <p></p>
            </div>
            <div class="c605 rounded">
                 <p></p>  
            </div> 
            <div class="c605 rounded">
                 <p></p>
            </div>
        </div>
    </div>
    Last edited by Sammy12; 09-19-2012 at 06:31 AM.

  • Users who have thanked Sammy12 for this post:

    PaulC2K (09-19-2012)

  • #3
    Regular Coder
    Join Date
    Jul 2005
    Posts
    131
    Thanks
    21
    Thanked 0 Times in 0 Posts
    how come it does work if you remove the 'website news' line then? (2nd line of code)
    its still working from a mix of elements and classes then isnt it.
    The additional class data is having some sort of an effect, just not one im happy with.

    Also, i thought someone on here told me off the other week because they had to be unique, so i've used #webnews as the unique ID, and then classes to add to it.
    I just try to do as im told, without really knowing the correct way, so it gets botched together. Im assuming im getting all mixed up or something


    Hang on, im getting terminology mixed up arent i, im thinking IDs are elements... elements are the basic html pieces, like p, h1, div etc?
    See what im dealing with?
    Last edited by PaulC2K; 09-19-2012 at 01:48 AM.

  • #4
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    Quote Originally Posted by PaulC2K View Post
    Hang on, im getting terminology mixed up arent i, im thinking IDs are elements... elements are the basic html pieces, like p, h1, div etc?
    Yeah elements are p, h1, div, etc.

    Code:
    #webnews .c605.rounded:nth-child(2) { background-color: yellow; }
    So from reading a bit through this article :nth-child and :nth-of-type, here's the main stuff:

    Our :nth-child selector, in "Plain English," means select an element if:
    It is a paragraph element
    It is the second child of a parent

    Our :nth-of-type selector, in "Plain English," means:
    Select the second paragraph child of a parent
    :nth-of-type is... what's a good way to say it... less conditional.
    > So you want to use :nth-child, because it checks whether the classes are correct AND it only works on the specified child position within ().

    I combined my posts due to inaccurate information. However my first post is the correct solution. The selectors don't have great browser support.
    Last edited by Sammy12; 09-19-2012 at 02:15 AM.

  • #5
    Regular Coder
    Join Date
    Jul 2005
    Posts
    131
    Thanks
    21
    Thanked 0 Times in 0 Posts
    Cheers for the updated 2nd post, that helps a lot.

    I was definitely using :first-of-type, im not sure why i went with that, i'd had a nosey at the various types and for some reason went with that, i'd tried :first-child last night and didnt get the instant results i wanted so moved on and i guess i only moved further away.

    Im useless with terminology, i wasnt reading 'elements' as a specific term, more as a generalisation

  • #6
    Regular Coder
    Join Date
    Jul 2005
    Posts
    131
    Thanks
    21
    Thanked 0 Times in 0 Posts
    The example in the 2nd post worked perfectly.
    Im just attempting to butcher it and see if i can make the contents of that first instance act differently to the rest. Should be a good hour or so wasted there (yey just 10min )

    nth was another i tried, again, not really knowing the differences too well (tbh, just looking at what existed on the w3school page http://www.w3schools.com/cssref/css_selectors.asp), i'll have a look at that link though, although im now sure how much will sink in, im hopeless at remembering ANYTHING coding related its quite pathetic, and im hoping to get my head around OOP and start using/writing css correctly rather than the abomination of code i've used in the past.
    Last edited by PaulC2K; 09-19-2012 at 02:19 AM.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •