Как изменить цвет li в css

Как изменить цвет Ul; LI (точки)

Но столкнулся с проблемой что теперь оно для всего приняло такой цвет а нужно поменять цвет в одном разделе на другой но при этом оставив этот же самый цвет. Что с этим можно сделать?

Отслеживать
задан 10 сен 2022 в 21:03
monkeykong monkeykong
5 1 1 золотой знак 1 1 серебряный знак 4 4 бронзовых знака

1 ответ 1

Сортировка: Сброс на вариант по умолчанию

Можно, но для этого придётся использовать свой «маркер»:

ul < list-style: none; /* Удалить маркеры по умолчанию */ >ul li::before < content: "\2022"; /* Добавляем content: \2022, он же символ точки (маркера) */ display: inline-block; width: 1em; color: red; /* меняем цвет */ font-weight: bold; margin-left: -1em; >

Вариант с псевдоэлементом ::marker

ul li::marker

P.s. ЯблокоФоны вам этого не простят.

Отслеживать
ответ дан 10 сен 2022 в 21:33
23.8k 4 4 золотых знака 35 35 серебряных знаков 68 68 бронзовых знаков
Спасибо, а можно это как-то реализовать с помощью классов?
11 сен 2022 в 12:51
11 сен 2022 в 17:02

• javascript
• html
• css

Важное на Мете

Похожие

Подписаться на ленту

Лента вопроса

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

Дизайн сайта / логотип © 2024 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2024.1.3.2953

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

Как сделать, чтобы цвет маркеров в списке отличался от цвета текста?

Задать цвет маркеров в списке не изменяя цвет текста.

Решение

Пример 1. Использование вложенных тегов

HTML5 CSS 2.1 IE Cr Op Sa Fx

Результат данного примера показан ниже (рис. 1).

Рис. 1. Маркеры, отличающиеся по цвету от основного текста

Несмотря на простоту, метод неудобен, особенно при объёмных списках, ведь к каждому пункту списка теперь придётся добавлять тег . Поэтому разберём хитрый способ, полностью основанный на работе CSS.

Internet Explorer	Chrome	Opera	Safari	Firefox	Android	iOS
8.0+	1.0+	7.0+	3.1+	1.0+	1.0+	1.0+

Смысл в следующем — убираем оригинальные маркеры списка через свойство list-style-type и добавляем свои собственные маркеры с помощью псевдоэлемента :before и свойства content . Такая связка позволяет вставлять любой текст или символ перед элементом, в данном случае LI . Причём видом текста (цвет, шрифт, фон и др.) также можно управлять через стили, что и продемонстрировано в примере 2. Здесь в качестве маркеров используется символ параграфа ¶.

Пример 2. Использование псевдоэлемента :before

HTML5 CSS 2.1 IE Cr Op Sa Fx

Результат данного примера показан на рис. 2.

Рис. 2. Маркеры, созданные с помощью стилей

Как средствами CSS изменить цвет маркера html-списка

Чтобы строки маркированного списка как-то выделить от основного текста, можно сделать так, чтобы цвет маркеров в списке отличался от цвета текста.

По умолчанию стоит черная точка. Если просто задать цвет элементу li, то ничего не получится — цвет будет задан всей строке, а нужно изменить только цвет маркера (ul li цвет точек).

Как изменить цвет буллитов с помощью CSS

1. Скрываем оригинальные маркеры списка с помощью свойства list-style-type
2. Добавляем свои собственные маркеры с помощью псевдоэлемента :before и свойства content. Это позволит вставить любой текст или символ перед элементом li.
3. Внешним видом маркера можно управлять через стили CSS, изменяя цвет, шрифт, фон и другое. Я использовал жирное начертание шрифта Монтсеррат.

li:before < font-family: 'Montserrat', sans-serif; font-weight: 400; color: #d7002e; /* Цвет маркера */ content: "•"; /* Маркер */ padding-right: 7px; /* Отступ от маркера до текста */ >

Если у вас возникла ситуация, когда маркеры появились в ненужных местах, например в главном меню или в дублирующем меню в футере, то это можно легко исправить. Просто допишите родительский элемент, в котором находятся списки, цвет маркеров которых нам надо изменить. Я добавил слово article и теперь эти изменения стали относиться только к контентной области сайта.

article li < list-style-type: none; /* Скрываем маркеры, отображаемые по умолчанию */ >

article li:before < font-family: 'Montserrat', sans-serif; font-weight: 400; color: #d7002e; /* Цвет маркера */ content: "•"; /* Маркер */ padding-right: 7px; /* Отступ от маркера до текста */ >

Как изменить цвет текста в списке?

Для изменения цвета текста в списке используйте стилевое свойство color, добавляя его к селектору ul , ol или li , как показано в примере 1.

Пример 1. Цвет фона в списке

Результат данного примера показан на рис. 1.

Рис. 1. Выделение цветом текста списка

Обратите внимание, что меняется цвет не только самого текста, но и маркеров. Если требуется задать цвет маркеров другим, смотрите этот рецепт.

См. также

• color
• currentColor
• text-fill-color
• Атрибут link
• Единицы цвета в CSS
• Наследование в CSS
• Работа с типографикой