Should this work am I going crazy?

```css
.project.work:first-child:before {
  content: 'Projects';
}
.project.research:first-child:before {
  content: 'Research';
}
```

```html
<div class="project work">
  <p>abcdef</p>
</div>
<div class="project work">
  <p>abcdef</p>
</div>
<div class="project work">
  <p>abcdef</p>
</div>
<div class="project research">
  <p>abcdef</p>
</div>
```

`projects:first-child` works fine, `research:first-child` doesn't stick. Any ideas?

[Demo](http://jsfiddle.net/VvwYD/) It doesn't work, but whats the best way to achieve this?