problems understanding :first-of-type

[PaulC2K]

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 amet, consectetur adipiscing elit. Quisque vel justo sed ligula vulputate adipiscing.</p> 
        </div>
        
        
        <div class="c605 rounded">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vel justo sed ligula vulputate adipiscing.</p> 
        </div>

        <div class="c605 rounded">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque 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?

[Sammy12]

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):

.section .c605.rounded:first-child {

}

<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>

[PaulC2K]

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?

[Sammy12]

Originally Posted by PaulC2K

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.

#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.

[PaulC2K]

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

[PaulC2K]

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.