Отображение первого элемента div в другом цвете

Question

Я делаю это на мой взгляд:

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

Это отображает мои сообщения в отдельном блоке div. Я хочу, чтобы первое сообщение было другого цвета.

Я пытался .content:first-child { background-color: red;}, но, похоже, это не работает.

Обновление

Фактический вывод HTML: -

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

Есть идеи, как мне достичь желаемого результата?

Answer 1

Я пытался .content:first-child { background-color: red;}, но, похоже, он не работает.

---

Вам не хватает пробела между ними, который нацелен на дочерние элементы:

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

Это выберет каждый первый .speech элемент, который является дочерним для .content. Пробел необходим для выбора дочерних элементов из элемента .content, а не самого элемента .content.

Демо: http://jsfiddle.net/RbBcD/2/

Первоначально я по ошибке сказал использовать .content :first-child, который слишком широк, так как он выберет каждого первого потомка во всем элементе .content. Тем не менее, .content > :first-child может также работать, но я не обязательно рекомендую это здесь.

Подробнее о :first-child: http://reference.sitepoint.com/css/pseudoclass-firstchild