Question

I have a styling problem, I am using WordPress and want to do have the first two classes completely different to the others.

My ideal situation is to have:

.si-biplace:nth-of-type(3) { float:left; margin:20px 0px 0px 0px; }
.si-image:nth-of-type(3) { float:left; margin:20px 0px 0px 0px; border:0px; }
.si-title:nth-of-type(3) { width:100px; height:20px; margin:0px; font-size:7px; color:#FFFFFF; font-weight:bold; }

They seem to work fine when it is:

.si-biplace { float:left; margin:-10px 0px 0px 0px; }
.si-biplace:nth-of-type(2) { float:left; margin:-10px 0px 0px 15px; }

Is there a reason why it will not work with nth-of-type(3) but will with nth of type 2? I basically want different attributes for every next time the div is used but cannot have separate div classes as it runs through a php array.

Here is my HTML & PHP Structure incase I am doing something wrong:

<div class="si-biplace">
    <div class="si-image">
        <a href="http://universitycompare.com:8888/945/test/">
        <img width="340" height="170" src="http://universitycompare.com:8888/wp-content/uploads/2012/09/post-test.png" class="attachment-si-images wp-post-image" alt="post-test" title="post-test"/></a>
    </div>
    <div class="si-title">
        <a href="http://universitycompare.com:8888/945/test/">Testing Post Article Number1</a>
    </div>
    <div class="si-date">
        &nbsp;Date:&nbsp; <a style="color:#154157;" href="http://universitycompare.com:8888/945/test/">
        September 6, 2012 </a>
    </div>
</div>
<div class="si-biplace">
    <div class="si-image">
        <a href="http://universitycompare.com:8888/28/what-graduates-need-to-know-about-creative-internships/">
        <img width="340" height="170" src="http://universitycompare.com:8888/wp-content/uploads/2012/09/post-test.png" class="attachment-si-images wp-post-image" alt="post-test" title="post-test"/></a>
    </div>
    <div class="si-title">
        <a href="http://universitycompare.com:8888/28/what-graduates-need-to-know-about-creative-internships/">What graduates need to know about creative internships</a>
    </div>
    <div class="si-date">
        &nbsp;Date:&nbsp; <a style="color:#154157;" href="http://universitycompare.com:8888/28/what-graduates-need-to-know-about-creative-internships/">
        July 3, 2012 </a>
    </div>
</div>
<div class="si-biplace">
    <div class="si-image">
        <a href="http://universitycompare.com:8888/25/students-say-they-will-work-for-free-after-graduating/">
        <img width="340" height="170" src="http://universitycompare.com:8888/wp-content/uploads/2012/09/post-test.png" class="attachment-si-images wp-post-image" alt="post-test" title="post-test"/></a>
    </div>
    <div class="si-title">
        <a href="http://universitycompare.com:8888/25/students-say-they-will-work-for-free-after-graduating/">Students say they will work for free after graduating</a>
    </div>
    <div class="si-date">
        &nbsp;Date:&nbsp; <a style="color:#154157;" href="http://universitycompare.com:8888/25/students-say-they-will-work-for-free-after-graduating/">
        July 3, 2012 </a>
    </div>
</div>

Answer 1

To style the first two elements in a class differently from the others, it is best to set general style settings for the class and then override them as desired for the first two.

If you for some reason wish to do it by setting some styles for the 3rd, 4th, 5th etc. child of an element, you can use :nth-child(n+3), and to refer to the 3rd, 4th, 5th etc. child of its kinf of an element, use :nth-of-type(n+3). This can be combined with a class selector, but it does not mean referring to nth element in a class.

In your case, assuming there is no other div element before these elements, you could thus use

.si-biplace:nth-of-type(n+3) { ... }
.si-biplace:nth-of-type(n+3) .si-image { ... }
.si-biplace:nth-of-type(n+3) .si-title { ... }

You cannot use constructs like .si-image:nth-of-type(3), because in your markup, each element in class .si-image is the first child of its parent and therefore never matches the selector.