Nth-of-type only works for 1 and 2
I have a design problem, I am using WordPress and want the first two classes to be completely different for the others.
My ideal situation:
.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 this:
.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 it won't work with nth-of-type (3), but will with nth type 2? I basically want different attributes for each next time the div is used, but cannot have separate div classes as it goes through the php array.
Here is my HTML and PHP structure, 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">
Date: <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">
Date: <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">
Date: <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>
source to share
To style the first two elements in a class distinct 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 for some reason you want to do this by setting some styles for the third, fourth, fifth, etc. child elements of an element, you can use :nth-child(n+3)
and reference the third, fourth, fifth, etc. its kinfa element, use :nth-of-type(n+3)
. This can be combined with a class selector, but that does not mean referencing the nth element in the class.
In your case, assuming there is no other element in front of these elements div
, you can 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 type constructs .si-image:nth-of-type(3)
because, in your markup, every element of a class .si-image
is the first child of its parent and therefore will never match a selector.
source to share
Ok, I think I have reproduced your problem. It looks like you need to use: nth-child () for items inside si-biplace sections.
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 the fiddle in which I started to reproduce the problem.
http://jsfiddle.net/krishollenbeck/sFkLz/6/
And and an article that talks about the difference between both in more detail ...
http://css-tricks.com/the-difference-between-nth-child-and-nth-of-type/
source to share