List style color: How To Change Bullet Color of a List — Вебджем.рф | Создание и продвижение сайтов

Содержание

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

Тема:Маркированный список

Internet Explorer	Chrome	Opera	Safari	Firefox	Android	iOS
4.0+	1.0+	4.0+	1.0+	1.0+	1.0+	1.0+

Задача

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

Решение

Существует два способа изменения цвета маркеров, условно назовем их простой и хитрый. Простой метод состоит в том, что внутрь <li> вкладываем тег <span>, а уже внутрь него помещаем текст. Иными словами вместо традиционной схемы <li>текст</li> создаем конструкцию <li><span>текст</span></li>. При этом цвет маркеров определяется стилевым свойством color для селектора LI, а цвет текста — для селектора SPAN (пример 1).

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

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Цвет текста и маркеров в списке</title>
  <style>
   li {
    color: red; /* Цвет маркеров */
   }
   li span {
    color: navy; /* Цвет текста */
   }
  </style>
 </head>
 <body>
  <ul>
   <li><span>Скрипка</span></li>
   <li><span>Гитара</span></li>
   <li><span>Волынка</span></li>
   <li><span>Шарманка</span></li>
   <li><span>Челеста</span></li>
  </ul>
 </body>
</html>

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

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

Несмотря на простоту, метод неудобен, особенно при объёмных списках, ведь к каждому пункту списка теперь придётся добавлять тег <span>. Поэтому разберём хитрый способ, полностью основанный на работе 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

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Цвет маркеров в списке</title>
  <style>
   li {
    list-style-type: none; /* Прячем исходные маркеры */
   }
   li:before {
    color: red; /* Цвет маркера */
    content: "¶ "; /* Сам маркер */
    padding-right: 10px; /* Расстояние от маркера до текста */
   }
  </style>
 </head>
 <body>
  <ul>
    <li>Север</li>
    <li>Юг</li>
    <li>Запад</li>
    <li>Восток</li>
  </ul>
 </body>
</html>

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

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

списки

HTML по теме

Тег <span>

CSS по теме

color
content
Псевдоэлемент :before

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

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

Использование <span>

Внутрь каждого элемента <li> вкладываем <span>, а уже внутрь него помещаем текст. Иными словами вместо традиционной схемы

<li>текст</li>

создаем конструкцию

<li><span>текст</span></li>

При этом цвет маркеров определяется стилевым свойством color для селектора li, а цвет текста — для селектора span (пример 1).

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

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>Цвет текста и маркеров в списке</title> <style> li { color: red; /* Цвет маркеров */ } li span { color: green; /* Цвет текста */ } </style> </head> <body> <ul> <li><span>Скрипка</span></li> <li><span>Гитара</span></li> <li><span>Волынка</span></li> <li><span>Шарманка</span></li> <li><span>Челеста</span></li> </ul> </body> </html>

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

1).

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

Несмотря на простоту, метод неудобен, особенно при объёмных списках, ведь к каждому пункту списка теперь придётся добавлять <span>.

Использование ::before

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

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

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>Цвет маркеров в списке</title> <style> li { list-style-type: none; /* Прячем исходные маркеры */ } li::before { color: red; /* Цвет маркера */ content: «▪»; /* Сам маркер */ padding-right: 10px; /* Расстояние от маркера до текста */ } </style> </head> <body> <ul> <li>Север</li> <li>Юг</li> <li>Запад</li> <li>Восток</li> </ul> </body> </html>

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

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

Списки

Цвет

См. также

<span>
color
content
currentColor
list-style-type
quotes
relative и absolute
Аккордеон меню
Добавление тени
Единицы цвета в CSS
Знакомство с HTML
Использование в вёрстке
Наследование в CSS
Не только текст
Подробнее о позиционировании
Псевдоэлемент ::before
Псевдоэлементы
Псевдоэлементы ::after и ::before
Работа с типографикой

Спойлер
Элементы <div> и <span>

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 11. 03.2020

Редакторы: Влад Мержевич

html — Как раскрасить автоматически сгенерированные номера в стиле списка?

Задавать вопрос

спросил 13 лет, 8 месяцев назад

Изменено 2 года, 4 месяца назад

Просмотрено 91к раз

Я использую следующий список:

 <ол>
    Это первая сноска...
    Это вторая сноска...

Со следующим .css:

 #footnotes {list-style-type: decimal;
            цвет-стиля-списка: #f90;
            }
#сноски ли
           {цвет: #000;
            }
#сноски а ли,
#сноски ли а
           {цвет: #f90;
            }

Цель состоит в том, чтобы сам текст li/footer был черным (

#000 ) и номер оранжевого цвета ( #f90 ).

Я пытался использовать свойство list-style-color , но это ничего не дает, кроме как нарушает работу панели инструментов веб-разработчика (в FF3.0.8/Ubuntu 8.04), Midori также не отображает число оранжевым цветом (я думал, что на всякий случай попробую в движке Webkit…).

Есть идеи?

Отредактировал HTML (поскольку я вспомнил, что тег не обязательно должен заключать что-либо, чтобы функционировать как якорь):

 <ол>
    Это первая сноска...
    Это вторая сноска...

В ответ на те, кто предлагает использовать внутри

… да. Это произошло, хотя я благодарю вас за предложения и потраченное время, но я искал (маленький стандартист… 😉 ) более… семантический вариант.

Думаю, я буду использовать этот подход. Хотя я принял другой ответ Пита Мишо из-за его чисто информативного характера. Спасибо!

HTML
CSS
XHTML

В CSS3 есть способ использовать модуль сгенерированного и замененного содержимого. С помощью этой техники вам не нужно добавлять дополнительную разметку к вашему HTML. Что-то вроде этого должно помочь:

 ол ли {
    тип стиля списка: нет;
    счетчик-приращение: список;
    положение: родственник;
}
ол ли: после {
    содержимое: счетчик(список) ".";
    положение: абсолютное;
    слева: -2.5em;
    ширина: 2см;
    выравнивание текста: вправо;
    красный цвет;
}

Это должно работать:

 
    Это первая сноска...
    Это вторая сноска...

#сноски li {цвет: #f90; }
#footnotes li span { color: #000; }

Самое интересное, что числа технически генерируются внутри

, поэтому все, что вы делаете с

, повлияет на число. Из спецификации:

«Большинство блочных элементов в CSS генерируют один основной блочный блок. В этом разделе мы обсудим два механизма CSS, которые приводят к тому, что элемент для создания двух блоков: один главный блок-бокс (для элемента содержимого) и один отдельный блок маркеров (для украшения, например, маркер, изображение или номер)»

Обратите внимание, что и поле маркера, и основное поле принадлежат тот же элемент — в данном случае элемент списка. Соответственно, мы должны ожидать, что все стили

будут применяться как к маркеру, так и к содержимому. Это также неудивительно, если вы думаете об этом так, как если бы список сам элемент генерирует содержимое нумерации (которое фактически делает в терминах CSS). Это подтверждается позже, когда спецификация продолжается:

«Свойства списка позволяют базовое визуальное форматирование списков. Как и в случае более общие маркеры, элемент с ‘display: list-item’ генерирует основное поле для содержимого элемента и дополнительное поле маркера. Другие свойства списка позволяют авторам указывать тип маркера. (изображение, глиф или число) и его положение относительно основная коробка (вне ее или внутри нее перед содержимым). Они не разрешить авторам указывать отдельный стиль (цвета, шрифты, выравнивание, и т. д.) для маркера списка или настроить его положение относительно главный ящик».

Таким образом, поскольку маркер принадлежит к списку, на него влияет стиль

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

Это простое решение CSS3 работает в большинстве браузеров (IE8 и выше):

 ул {
    отступ слева: 14px;
    стиль списка: нет;
}
уль ли: до {
    цвет: #f90;
    содержание: "•";
    положение: родственник;
    слева: -7px;
    размер шрифта: 18 пикселей;
    поле слева: -7px;
}

Возможно, вам придется настроить значения padding и margin в зависимости от ситуации.

У меня недавно была аналогичная проблема, и я нашел статью «Стили упорядоченных номеров списка», в которой описывается умный способ достижения стиля маркеров списка без использования дополнительных тегов . В статье в основном написано, что для упорядоченного списка:

Ключ использует содержимое, сгенерированное CSS, для создания и вставки номера счетчиков после удаления нумерации по умолчанию из списка.

Подробнее читайте в статье.

В наши дни вы можете просто использовать ::marker ;

Пример:

 li::marker {
  цвет: #f90;
}

Подробнее здесь, включая таблицу совместимости браузеров: https://developer.mozilla.org/en-US/docs/Web/CSS/::marker#Browser_compatibility

Как насчет этого?

 <голова>
  <стиль>
    #сноски li {цвет: #f90; }
    #footnotes li a { color: #000; }
  

<тело>
  <ол>
    Это первая сноска. ..
    Это вторая сноска...

Объединив некоторые другие ответы, которые я нашел неполными, я нахожу этот наиболее полным. Он рассматривает 90 105 подтипов стилей 90 106 для разных уровней иерархии и считает, что li может состоять из более чем одной строки (90 135 :после 90 136 мест в нижней строке, поэтому мы используем :до ).

Обратите внимание на настройку второстепенного персонажа: 1. 1) .Проверено в Chrome.

 ol { счетчик-сброс:li; }
ол ли {
    тип стиля списка: нет;
    счетчик-приращение: li;
    должность: родственница;
}
ол ли: до {
    содержание:счетчик(li) ")";
    положение: абсолютное;
    слева: -2,6 эм;
    ширина: 2см;
    выравнивание текста: вправо;
    цвет: #f00;
}
ol ol li:before { content:counter(li,lower-alpha) ")"; }
ол ол ол li:before { content:counter(li,нижний роман) "."; }

Вы также можете использовать «внешний» атрибут в стиле списка. См. здесь

Зарегистрируйтесь или войдите в систему

Зарегистрируйтесь с помощью Google

Зарегистрироваться через Facebook

Зарегистрируйтесь, используя электронную почту и пароль

Опубликовать как гость

Электронная почта

Требуется, но не отображается

Опубликовать как гость

Электронная почта

Требуется, но не отображается

css — использование встроенного стиля для окрашивания маркеров списка иначе, чем элементы списка

Задавать вопрос

спросил 6 лет, 7 месяцев назад

Изменено 2 года, 11 месяцев назад

Просмотрено 9к раз

Я использую внутреннюю таблицу стилей CSS для определения стилей для своих элементов

. Однако для одного списка, который у меня есть, я хотел бы использовать встроенные стили. Я хочу, чтобы элементы списка были одного цвета (синего), а маркеры списка — другого (красного). Если бы я использовал внутреннюю таблицу стилей, для рассматриваемого списка это было бы выполнено следующим образом:
```
  

 
```