Question

I am doing this in my view :

<div class="eight columns">
    <div class="content">
        <%= post.text %>
    </div>
</div>

This displays my posts in a separate block of divs I want the first post to be of different color.

I tried .content:first-child { background-color: red;} but it doesn’t seem to work.

Update

Actual HTML Output :-

 <div class="eight columns">
        <div class = "speech">
          <p>Has anyone got a clue about this?</p>
        </div>
 </div>

Any ideas how can I achieve the desired result?

Answer 1

I tried .content:first-child { background-color: red;} but it doesn’t seem to work.

---

You’re missing the space in between, which targets child elements:

.content .speech:first-child { background-color: red;} 

This will select every first .speech element that’s a child of .content. The space is needed to select children of the .content element rather than the .content element itself.

Demo: http://jsfiddle.net/RbBcD/2/

Originally, I mistakenly said to use .content :first-child which is much too broad, as it will select every first child in the entire .content element. However, .content > :first-child could work as well but I don’t necessarily recommend it here.

More on :first-child: http://reference.sitepoint.com/css/pseudoclass-firstchild