Как только через CSS выделить начиная от второго слова другим цветом?

Question

Как только через CSS выделить начиная от второго слова другим цветом?

Также учесть что слово может быть одна буква, пример "О компании"

Без изменения HTML

Нужно первое слово сделать серым, все остальные слова красным:

div {
  color: #f00;
}

<div>Самый простой текст</div>
<div>О компании</div>

Answer 1

На мой взгляд лучшее решение.

span:first-child {
  color: green;
}

span:last-child {
  color: red;
}

<div>
  <span>Первое</span>
  <span>слово в данном предложении зеленого цвета</span>
</div>

Answer 2

Существует масса проблем и ограничений даже с ::first-letter, а уж ::first-word и вовсе пока не существует в природе. Поэтому "pure CSS" тут не поможет - только JS.

Скриптами можно покрыть все потребности и хотелки, причём практически без простыней кода:

let first = document.querySelector('.first');
first.innerHTML = first.innerHTML.replace(/(^ ?|<br> ?|[!?.] .*?)([\wа-яё]+)/gim, '$1<span class="hl">$2</span>');

let smart = document.querySelector('.smart');
smart.innerHTML = smart.innerHTML.replace(/(^ ?|<br> ?|[!?.] .*?)([\wа-яё]{3,})/gim, '$1<span class="hl">$2</span>');

.hl { color: green; }

<p class="first">Первое слово в данном предложении зеленого цвета! А второе уже чёрного.<br> Снова зелёное? Да, опять зелёное... Включая предлоги и коротенькие слова.</p>

<p class="smart">Первое слово в данном предложении зеленого цвета! А второе тоже зелёного.<br> Снова зелёное? Да, опять зелёное... Предлоги и короткие слова не захватываем.</p>

Answer 3

Можно сделать у div псевдоэлемент ::before и выделить его нужным цветом:

.div {
color: #f00;
}

.div::before {
content: 'Самый';
color: #000;
}

Если нужно последнее слово, то ::after

Answer 4

нууу... можно например вот так

/* чуть ли не под каждую ситуацию придется
подбирать свои наборы чисел, но пока хоть так... 
зато без JS. и даже без экзотических свойств :3 */
#t:checked ~ .x{columns: 2 auto; text-indent: 100%;}
#u:checked ~ .x{columns: 2 auto; text-indent: 115%;}
#v:checked ~ .x{columns: 2 auto; text-indent: none;}

#w:checked ~ .x{columns: 3 auto; text-indent: 100%;}
#x:checked ~ .x{columns: 3 auto; text-indent: none;}

#y:checked ~ .x{columns: 4 auto; text-indent: 100%;}
#z:checked ~ .x{columns: 4 auto; text-indent: none;}

.x{
  text-align: center;
  border: 3px solid pink;
}

div {color: red;}
.x::first-line{color:blue;}

<input type='radio' id='t' name='xyz' checked>
<input type='radio' id='u' name='xyz'>
<input type='radio' id='v' name='xyz'>
<input type='radio' id='w' name='xyz'>
<input type='radio' id='x' name='xyz'>
<input type='radio' id='y' name='xyz'>
<input type='radio' id='z' name='xyz'>

<div>Самый простой текст</div>
<div class='x'>наконец интересный челлендж</div>
<div class='x'>О компании</div>
<div class='x'>О нашей компании</div>
<div class='x'>О нашей большой компании</div>
<div class='x'>еще немного текста</div>

но если вспомнить про такие штуки как...

color: transparent;
background-clip: text;
linear-gradient();
box-decoration-break: slice;

https://developer.mozilla.org/en-US/docs/Web/CSS/box-decoration-break

уже догадываетесь что будет дальше?

quick чего-то там fox из ссылки выше как бы намекает ;3

#x:checked + *{
  display: inline-block;
  line-height: 1em;
  background: linear-gradient(
    to bottom,
    red 0, red 1em,
    orange 0, orange 2em,
    yellow 0, yellow 3em,
    green 0, green 4em,
    skyblue 0, skyblue 5em,
    blue 0, blue 6em,
    violet 0, violet 7em
  );
}
#y{
  line-height: 1em;
  background: linear-gradient(
    to bottom,
    red 0, red 1.2em,
    orange 0, orange 2.4em,
    yellow 0, yellow 3.6em,
    green 0, green 4.8em,
    skyblue 0, skyblue 6em,
    blue 0, blue 7.2em,
    violet 0, violet 8.4em
  );
  color: transparent;
  background-clip: text !important;/*чтоб не слетал от чекбокса*/
  text-align: center;
  box-decoration-break: slice;

  box-shadow: inset 0 0 2px 2px black;
  border-radius: .5em;
  padding: .1em 1em;
}
body{columns: auto 8; background: #444; font-style:bold;}

<input type='checkbox' id='x' title='собрать до кучи'>
<div id='y'>каждый охотник желает знать где сидит фазан</div>

БЛОГ НА HUSL

Как только через CSS выделить начиная от второго слова другим цветом?

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