Задать цвет второму слову

@Тыр-тыр · Регистрация: 29.08.2014

Студворк — интернет-сервис помощи студентам

Братья, как задать цвет второму слову используя CSS?

HTML5
1
<h1><a href="">Первоеслово Второеслово</a></h1>

Без оборачивания второго слова тегом (span, font или каких-то других)!

@galawar · 28.04.2018, 14:59

C помощью только CSS никак, тут или span или javascript

@Тыр-тыр · 28.04.2018, 15:31 **[ТС]**

А мне кажется, что как-то можно с помощью CSS

@aj17 · 28.04.2018, 16:05

Сообщение от Тыр-тыр

А мне кажется, что как-то можно с помощью CSS

Автоматически последнее слово выделить не получиться с помощью CSS. Как вам подсказали выше, только если вы сами обернете в span...

@Тыр-тыр · 28.04.2018, 16:49 **[ТС]**

Но буквы (символы) вроде же можно?

Qwerty_Wasd · 28.04.2018, 17:03

Сделать это на чистом CSS, задача конечно бредовая, но если не мыслить узко, то - песочница

HTML5
1
<h1><a href="#">Первоеслово Второеслово</a></h1>

CSS
1
2
a{position:relative}
a::after{position:absolute;content:"Второеслово";color:red;right:0}

@aj17 · 28.04.2018, 17:08

Сообщение от Тыр-тыр

Но буквы (символы) вроде же можно?

Можно выделить первую строку, и первую букву в первом слове. И все на этом.

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<!DOCTYPE html>
<html lang="en">
 
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    * {
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
 
    p {
      font: 16px/24px Arial;
    }
 
    span:nth-of-type(2){
      color: red;
      font-weight: bold;
    }
 
  </style>
 
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
 
 
</head>
 
<body>
  <p>Далеко-далеко словесными горами в стране, гласных и согласных живут рыбные тексты. Но рукописи собрал это текстов она, знаках проектах на берегу инициал семантика букв злых сих несколько ему большого, рекламных подпоясал повстречался.</p>
 
  <script type="text/javascript">
    $(document).ready(function(){
      $('p').each(function(){
        var newText = $(this).text().split(' ').join('</span> <span>');
        newText = '<span>' + newText + '</span>';
        $(this).html(newText);
      });
 
    });
  </script>
</body>
 
</html>

@AlexZaw · 28.04.2018, 17:14

Сообщение от Тыр-тыр

Но буквы (символы) вроде же можно?

Можно выбрать первую букву в элементе, первую строку, можно выбрать нужный элемент по счету, но выбрать одно слово из текста без дополнительных тегов нельзя. В css просто нет инструментов для этого, так что либо делать обертку для нужного слова, либо использовать JS.

Можно конечно использовать вариант который предложил Qwerty_Wasd, но это такое же извращение как и использование JS

Qwerty_Wasd · 28.04.2018, 17:15

AlexZaw,

Сообщение от AlexZaw

но это такое же извращение

так и есть

Но если задача единична - она выполнена.

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Реализация движения на Box2D v3 - трение и коллизии с повёрнутыми стенами 8Observer8 20.02.2026 Содержание блога Box2D позволяет легко создать главного героя, который не проходит сквозь стены и перемещается с заданным трением о препятствия, которые можно располагать под углом, как верхнее. . .	Конвертировать закладки radiotray-ng в m3u-плейлист damix 19.02.2026 Это можно сделать скриптом для PowerShell. Использование . \СonvertRadiotrayToM3U. ps1 <path_to_bookmarks. json> Рядом с файлом bookmarks. json появится файл bookmarks. m3u с результатом. # Check if. . .	Семь CDC на одном интерфейсе: 5 U[S]ARTов, 1 CAN и 1 SSI Eddy_Em 18.02.2026 Постепенно допиливаю свою "многоинтерфейсную плату". Выглядит вот так: https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11617&stc=1&d=1771445347 Основана на STM32F303RBT6. На борту пять. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .
И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.	«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»	SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .

@galawar 154 / 123 / 90 Регистрация: 09.04.2018 Сообщений: 351
	28.04.2018, 14:59
	C помощью только CSS никак, тут или `span` или `javascript` 0

@Тыр-тыр -86 / 7 / 0 Регистрация: 29.08.2014 Сообщений: 247
	28.04.2018, 15:31 [ТС]
	А мне кажется, что как-то можно с помощью CSS 0

@Тыр-тыр -86 / 7 / 0 Регистрация: 29.08.2014 Сообщений: 247
	28.04.2018, 16:49 [ТС]
	Но буквы (символы) вроде же можно? 0