Nth-of-type Only Working For 1 And 2

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(

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

Solution 2:

Okay I think I have reproduced your problem.. It looks like you need to use :nth-child() for the elements inside of the "si-biplace" divs.

Here is my CSS from my fiddle..

.biplace:nth-of-type(3){
    float:left; margin:20px 0px 0px 0px;   
}


.biplace:nth-of-type(3) .image:nth-child(3){
    float:left; margin:20px 0px 0px 0px; border:0px; 
}

.biplace:nth-of-type(3) .title:nth-child(3){
    width:100px; height:20px; margin:0px; font-size:7px; color:red; font-weight:bold; border:1px solid red; 
}

And some HTML, it should be the same as your structure...

   <p class="image">Something</p>
   <p class="image">Something</p>

   <h2 class="title">First Title</h2>
</div>




 <div class="biplace">
   <p class="image">Something</p>
   <p class="image">Something</p>

     <h2 class="title">Second Title</h2>
</div>




 <div class="biplace">
   <p class="image">Something</p>
   <p class="image">Something</p>

     <h2 class="title">Third Title</h2>
</div>

Here is a fiddle I started to reproduce the problem.

http://jsfiddle.net/krishollenbeck/sFkLz/6/

And and article which talks about the difference of both in more detail...

http://css-tricks.com/the-difference-between-nth-child-and-nth-of-type/