Как изменить стиль первого слова в тексте (:first-word)

Первое, что приходит в голову — воспользоваться псевдоклассом :first-word. Однако, такого псевдокласса не существует. Получается, задача решения не имеет.

Не всё так грустно — первое слово в тексте можно поймать и выделить с помощью PHP или JavaScript. Об этих двух способах я сегодня и расскажу.

Каким образом вообще меняется стиль текста в HTML?

Для этого текст оборачивается в какой-нибудь тег. Можно присвоить класс или айди, чтобы точнее к нему прицелиться. Мы обойдемся без классов и в качестве примера возьмем заголовок H1 с тегом span внутри, и зададим ему такой стиль:

h1 span {
color: red;
}

Т.е. текст в заголовках H1, обернутый в span, будет красного цвета.

Теперь наша задача сводится к тому, чтобы вычленить из заголовка первое слово и обернуть его в тег span.

Сделаем это сначала на PHP, а потом на JavaScript.

PHP

На PHP задача решается очень просто с помощью строковых функций.

Допустим у нас есть некая переменная $title, содержащая искомый текст.

$title = 'Lorem ipsum dolor sit amet, consectetur adipisicing elit.';

Для решения задачи воспользуемся функцией explode(), которая возвращает массив строк, полученных разбиением строки с помощью разделителя. В нашем случае разделителем будет являться первый пробел.

$title = explode(" ", $title, 2);
echo '<span>' . $title[0] . '</span> ' . $title[1];

В результате получим:

<span>Lorem</span> ipsum dolor sit amet, consectetur adipisicing elit.

Теперь тегу span можно задать нужный стиль.

JavaScript

С ванильным JavaScript вряд ли кто-то захочет связываться, а вот на jQuery задача решается ещё проще, чем на PHP.

Код такой:

$(document).ready(function(){
 $('h1').each(function(){
  var title = $(this);
  title.html( title.text().replace(/(^\w+)/,'<span>$1</span>') );
 });
});

Скрипт находит все заголовки H1 на странице и оборачивает первое слово внутри их тегом span.

Не забудьте подключить jQuery.

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

В результате первое слово всех заголовков H1 будет красного цвета, как и в примере с PHP.

Взяв за основу эти решения, можно пойти дальше и усложнить их до нужного результата. А про CSS обязательно расскажу, как только найдётся нормальное решение.