Tumblr 1st post different style using nth or first child - html

Question

I'd like to know exactly which element on my HTML to implement nth-child or first-child property so that the first post has a different style. A grid usually seen in many blogs. I found this same question here in SO. But since my html elements are different, I can't seem to make it work.
I tried using:
#content #posts:first-child {...}
But it doesn't work. Knowing Tumblr's limitations, I'm not sure if there's a workaround for this. Anyhow, here is my html:
<div id="content">
<div id="posts">
{block:Text}<!--textpost-->
{block:Title}
<h1 class="title">
{Title}
</h1>
{/block:Title}
<div class="text">{Body}</div>
{block:More}
<div class='rmlink'>Read more</div>
{/block:More}
{/block:Text}<!--textpost-->
{block:Photo}<!--photopost-->
<h1 id="ribbon">
Photo of the day
</h1>
{LinkOpenTag}
<div id="photopost">
<img src="{PhotoURL-HighRes}"/></div>
{LinkCloseTag}
{block:Caption}
<div class="caption">{Caption}</div>
{block:More}
<div class='rmlink'>
Read more
</div>
{/block:More}
{/block:Caption}
{/block:Photo}<!--photopost-->
</div><!--posts-->
</div><!--content-->

Answer 1

You need a wrapper around each post type. The usual markup I have seen is a div or article with the class post. That will allow you to target nth children. So Inside each post type block {block:Text} you need to wrap the content in a wrapper that has the same class.
Then you can write some css like this:
#posts .post {
color:black;
}
#posts .post:first-child {
color:#CCCCCC;
}
See my fiddle here: http://jsfiddle.net/4fsh7rvr/
The #posts element will always be an only child as it has an ID which is unique.