it-swarm.com.ru

Изменить цвет последней буквы

Пример кода:

<p class="test">string</p>

Я хочу изменить цвет последней буквы, в данном случае «g», но мне нужно решение с помощью css, мне не нужно решение javascript.

Я отображаю строку буква за буквой, и я не могу использовать статическое решение.

23
user1979270

Без использования JavaScript, ваш единственный вариант:

<p class="test">strin<span class="other-color">g</span></p>

Отредактируйте свою скриптовую ссылку:

Я не совсем уверен, почему вы сказали, что вам не нужно решение javascript, так как у вас его уже немало. В любом случае, в этом примере вам нужно внести всего пару небольших изменений. Изменить строку 10 с

elem.text(elem.text() + contentArray[current++]);

в

if ( current == contentArray.length-1 ) {
    elem.html(elem.html() + "<span style='color:red'>"+contentArray[current++]+"</span>");
} else {
    elem.html(elem.html() + contentArray[current++]);
}

Обратите внимание, что сейчас важно использовать .html() вместо .text(), поскольку фактически вставляется разметка HTML.

Рабочая скрипка: http://jsfiddle.net/QTUsb/2/

9
David Kiger

Все говорят, что это невозможно. Я здесь, чтобы доказать обратное.

Да, это можно сделать.

Ладно, это ужасный взлом, но это можно сделать.

Нам нужно использовать две функции CSS:

  • Во-первых, CSS предоставляет возможность изменить направление потока текста. Это обычно используется для таких скриптов, как арабский или иврит, но на самом деле работает для любого текста. Если мы используем его для английского текста, буквы отображаются в порядке, обратном тому, как они появляются в разметке. Таким образом, чтобы текст отображался как слово «String» на обращенном элементе, нам нужно иметь разметку, которая гласит «gnirtS».

  • Во-вторых, CSS имеет селектор псевдоэлемента ::first-letter, который выбирает первую букву в тексте. (другие ответы уже установили, что это доступно, но нет эквивалентного селектора ::last-letter)

Теперь, если мы объединим ::first-letter с перевернутым текстом, мы можем выбрать первую букву «gnirtS», но это будет выглядеть так, как будто мы выбираем последнюю букву «String».

Итак, наш CSS выглядит так:

div {
    unicode-bidi:bidi-override;
    direction:rtl;
}

div::first-letter {
    color: blue;
}

и HTML:

<div>gnirtS</div>

Да, это работает - вы можете увидеть рабочую скрипку здесь: http://jsfiddle.net/gFcA9/

Но, как я уже сказал, это немного глупо. А кто хочет тратить свое время на написание всех задом наперед? Не совсем практичное решение, но оно действительно отвечает на вопрос.

145
Spudley

Используйте псевдоэлемент ::after в сочетании с attr() function: 

p::after {
    content: attr(data-end) ;
    color: red ;
}
<p data-end="g">Strin</p>

p::after {
  content: attr(data-end) ;
  color: red ;
}
<p data-end="g">Strin</p>

30
Supersharp

Другое решение заключается в использовании ::after

.test::after{
 content:"g"
 color:yellow;
}
<p class="test">strin</p>

Это решение позволяет изменить цвет всех символов, а не только буквы, как ответ от Spudley, который использует ::first-letter. Смотрите ::first-letterспецификацию для получения дополнительной информации. ::first-letter применяется только к буквам и игнорирует знаки препинания. 

Более того, если вы хотите раскрасить больше, чем последний символ, вы можете:

.test::after{
  content:"ing"
  color:yellow;
}
<p class="test">str</p>

Для получения дополнительной информации об :: после проверки этой ссылка .

17
Marc_Alx

Этого можно достичь, используя только CSS и псевдоэлемент ::after без каких-либо изменений в HTML:

.test {
  font-size: 16pt;
  position: relative;
}
.test::after {
  bottom: 0;
  color: red;
  content: 'g';
  position: absolute;
  transform: translate(-100%, 0);
}
<p class="test">string</p>

5
Jastrzebowski

Каким образом вы «отображаете строку буква за буквой»? Если вы перебираете символы в строке (переменной), вы, безусловно, можете сказать, когда вы набрали последнюю букву, и обернуть ее в том, что вы делаете - на стороне сервера или на стороне клиента.

Глядя на скрипки, прикрепленные к еще один из ваших вопросов ...

Если это то, о чем вы говорите, вам, возможно, придется установить .innerHTML элемента вместо element.text()

С скрипки по адресу http://jsfiddle.net/SLKEn/ вы могли бы изменить его на что-то вроде этого

if(current < contentArray.length) {
    elem.html(
            elem.html() +
              (current == contentArray.length-1 ?
               '<span class="lastchar">' + contentArray[current++] + '</span>' :
               contentArray[current++])
             );
        }

вместе с CSS span.lastchar { color: red; }


Обновление: рабочая скрипка на основе вашего другого вопроса.

1
Stephen P

$(document).ready(function() {
  var str=$("span").text();
  strArr=str.split("");
  for(var key=0;key<=strArr.length-1;key++) {
    if(key==strArr.length-1) {
      var newEle="<span id='lastElement'>"+strArr[key]+"</div>";
      strArr[key]=newEle;
    }
  }
  var newtext=strArr.join("");
  $("span").html(newtext);  
});
  
span#lastElement {
  color: red;
}

0
shaan gola

у меня нет возможности комментировать ветку ответов, но я хотел указать на ошибку в ответе, предоставленном Marc_Alx , который в противном случае работает замечательно. это решение сработало для меня только после добавления точки с запятой за свойством content ... так что это выглядит как content:"ing";

.test::after{
  content:"ing";
  color:yellow;
}
<p class="test">str</p>
0
joeinfo