Как стилизовать отдельное слово в тексте лишь в css файле без добавления лишних тегов

Question

У меня есть текст помещённый в параграф:

<p class="header">Welcome to wonderful place</p>

Я хочу выделить слово wonderful другим фоном. Как я могу это сделать в CSS-файле, без добавления лишних тегов (таких, как <span> и т.п.)?

Answer 1

Чтобы выделить (стилизовать, применить индивидуальный стиль) отдельное слово в параграфе, его необходимо "вручную" обернуть отдельным тегом, например span, и соответственно в CSS написать нужный стиль. Пример такой реализации:

.header>span {font-weight:bold; background:pink;}

<p class="header">Welcome to <span>wonderful</span> place</p>

Можно поступить другим образом - применить JavaScript. Пример такой реализации:

(function() {
  var header = document.querySelector('.header');
  var word = 'wonderful',
    regexp = new RegExp(word, 'i');
  if (regexp.exec(header.innerHTML)) {
    var reg = new RegExp(word, 'g');
    header.innerHTML = header.innerHTML.replace(reg, '<span style="font-weight: bold; background:pink;">' + word + '</span>');
  }
}());

<p class="header">Welcome to wonderful place</p>

С помощью скрипта найти нужное слово и применить к нему стиль. Но и здесь найденное слово будет обернуто отдельным тегом. За вас это сделает скрипт. Это не обязательно может быть тег span. Любой тег, который вы укажете. Но он должен быть, это крайняя необходимость для того, чтобы для отдельного слова применить индивидуальный стиль.

Других вариантов, увы, нет.

БЛОГ НА HUSL

Как стилизовать отдельное слово в тексте лишь в css файле без добавления лишних тегов

Ответы (1 шт):