Изменение цвета первого слова в heading

[cloudrc]

Доброго времени суток!

Необходимо в каждом box-heading первое слово сделать другим цветом.

Получится ли это сделать посредством Css(по принципу :first-letter)?

Или если можно только с помощью JS, то буду признателен за подсказку.

Заранее спасибо!

Пример: th-ecra-ter.ru (без тире)

[AlexDW]

гуглить css первое слово другим цветом и выбирать подходящий вариант

[cloudrc]

Нашел вариант с JS

Но при использовании скрипта все заголовки, которым задаю необходимый класс, становятся одинаковыми, включая названия, т.е. по сути "склеиваются".

Код:

<script>
$(function(){
var a = new String;
a = $('.text_cont_inner').html();
var b = a.indexOf(' '); 
if (b == -1) {
b = a.length;
}
$('.text_cont_inner').html('<span class="first_word">'+a.substring(0, b)+'</span>'+a.substring(b, a.length));
});
</script>

Кто подскажет решения проблемы?

С JS почти незнаком, предложили использовать массив:

 <script>
$(function(){
var a = [], len, i, b =  [];
len = $('.text_cont_inner').length;
for (i = 0; i < len; i++) {
a[i] = $('.text_cont_inner')[i].html();
b[i] = a[i].indexOf(' '); 
if (b[i] == -1) {
b[i] = a[i].length;
}
$('.text_cont_inner')[i].html('<span class="first_word">'+a[i].substring(0, b[i])+'</span>'+a[i].substring(b[i], a[i].length));
}
});
</script>

Но при использовании массивов, первое слово в заголовках не меняется.(Возможно, я просто не понял принцип массивов и как их использовать).

Буду благодарен за помощь!

Змінено 5 липня 2015 користувачем cloudrc