Вопрос Как покрасить часть текста в html/css

[Point-]

как покрасить часть текста в html/css

У меня есть h2 в которой текст Hello World

Как покрасить в другой цвет Hello, не создавая нового элемента

 

[777ronaldo777]

Точно такой же ответ ты скрыл...
Но есть и другие способы поинтереснее

 

[rom41k]

Hello World h2 span {
color: red;
}

 

[Лолкин]

А как вы CSS-ке объясните, какую часть текста надо покрасить?
Насколько мне известно, только элементом.
Например, сделать дочерний <span>: Hello World

 

[читернаут]

ну так... Селекторами работай






CSS Selectors Example

h2::after { content: " Hello "; color: red; }




Hello, World!

Основные типы селекторов CSS
Селекторы по тегу (элементу)

Выбирают все элементы указанного типа.
Пример: p { color: blue; } — применяет стиль ко всем элементам (параграфам).
Селекторы по классу

Выбирают элементы с определённым атрибутом class.
Пример: .button { background-color: red; } — применяет стиль ко всем элементам с классом button.
Классы обозначаются точкой (.) перед именем класса.
Селекторы по идентификатору (ID)

Выбирают элемент с определённым атрибутом id. ID должен быть уникальным для каждой страницы.
Пример: #header { font-size: 24px; } — применяет стиль к элементу с ID header.
Идентификаторы обозначаются символом решётки (#) перед именем ID.
Универсальные селекторы

Выбирают все элементы.
Пример: * { margin: 0; padding: 0; } — сбрасывает отступы и поля для всех элементов на странице.
Обозначаются звёздочкой (*).
Селекторы атрибутов

Выбирают элементы с определёнными атрибутами или значениями атрибутов.
Пример: input[type="text"] { border: 1px solid #000; } — применяет стиль ко всем текстовым полям ввода.
Обозначаются квадратными скобками ([]) вокруг атрибута.
Комбинированные селекторы
Групповые селекторы

Позволяют применять один и тот же стиль к нескольким селекторам.
Пример: h1, h2, h3 { color: green; } — применяет зелёный цвет ко всем заголовкам h1, h2 и h3.
Дочерние селекторы

Выбирают элементы, которые являются дочерними для другого элемента.
Пример: div > p { color: red; } — применяет красный цвет ко всем , которые являются непосредственными дочерними элементами .
Комбинированные селекторы (смежные)

Выбирают элементы, которые непосредственно следуют за указанным элементом.
Пример: h1 + p { margin-top: 0; } — применяет стиль к абзацам , которые следуют непосредственно за заголовком .
Потомковые селекторы

Выбирают элементы, которые являются потомками указанного элемента.
Пример: div p { color: blue; } — применяет синий цвет ко всем , которые являются потомками .
Псевдоклассы и псевдоэлементы
Псевдоклассы

Выбирают элементы на основе их состояния или их положения в DOM.
Пример: a:hover { color: red; } — применяет красный цвет к ссылкам при наведении курсора мыши.
Пример: li:first-child { font-weight: bold; } — применяет жирный шрифт к первому элементу списка.
Псевдоэлементы

Выбирают и стилизуют части элементов.
Пример: p::first-line { font-size: 20px; } — изменяет размер шрифта для первой строки каждого абзаца.
Пример: p::before { content: "Note: "; color: red; } — добавляет текст перед содержимым каждого абзаца.