list-style-type ⚡️ HTML и CSS с примерами кода

Свойство list-style-type изменяет вид маркера для каждого элемента списка.

Это свойство используется только в случае, когда значение list-style-image установлено как none. Маркеры различаются для маркированного списка (элемент <ul>) и нумерованного (элемент <ol>).

Демо

Списки, счетчики, генерируемый контент
  • counter-increment
  • counter-reset
  • counter-set
  • list-style-image
  • list-style-type
  • list-style-position
  • list-style
  • content
  • quotes

Синтаксис

/* Partial list of types */
list-style-type: disc;
list-style-type: circle;
list-style-type: square;
list-style-type: decimal;
list-style-type: georgian;
list-style-type: cjk-ideographic;
list-style-type: kannada;
/* <string> value */
list-style-type: '-';
/* Identifier matching an @counter-style rule */
list-style-type: custom-counter-style;
/* Keyword value */
list-style-type: none;
/* Global values */
list-style-type: inherit;
list-style-type: initial;
list-style-type: unset;

Значения

Значения зависят от того, к какому типу списка они применяются: маркированному или нумерованному.

Маркированный список

circle
Маркер в виде кружка.
disc
Маркер в виде точки.
square
Маркер в виде квадрата.

Нумерованный список

armenian
Традиционная армянская нумерация.
decimal
Арабские числа (1, 2, 3, 4,…).
decimal-leading-zero
Арабские числа с нулем впереди для цифр меньше десяти (01, 02, 03,…).
georgian
Традиционная грузинская нумерация.
lower-alpha
Строчные латинские буквы (a, b, c, d,…).
lower-greek
Строчные греческие буквы (α, β, γ, δ,…).
lower-latin
Это значение аналогично lower-alpha.
lower-roman
Римские числа в нижнем регистре (i, ii, iii, iv, v,…).
upper-alpha
Заглавные латинские буквы (A, B, C, D,. ..).
upper-latin
Это значение аналогично upper-alpha.
upper-roman
Римские числа в верхнем регистре (I, II, III, IV, V,…).
none
Отменяет маркеры для списка.

Значение по-умолчанию:

list-style-type: disc; /* для ul */
list-style-type: decimal; /* для ol */

Применяется к: К элементам <li>, <ol> и <ul>, а также ко всем элементам, у которых указано display: list-item

Спецификации

  • CSS Counter Styles Level 3
  • CSS Lists and Counters Module Level 3
  • CSS Level 2 (Revision 1)

Описание и примеры

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>list-style-type</title>
    <style>
      ol {
        list-style-type: upper-roman;
      }
    </style>
  </head>
  <body>
    <ol>
      <li>Gaius Octavius Thurinus</li>
      <li>Tiberius Claudius Nero</li>
      <li>Gaius Iulius Caesar Augustus Germanicus</li>
      <li>Tiberius Claudius Drusus</li>
      <li>Lucius Arruntius Camillus Scribonianus</li>
      <li>Nero Claudius Caesar Drusus Germanicus</li>
      <li>Lucius Clodius Macer</li>
    </ol>
  </body>
</html>

Псевдокласс :first-of-type | WebReference

Псевдокласс :first-of-type задаёт стиль первого элемента определённого типа в группе братских элементов (имеющих одного родителя).

В качестве примера рассмотрим следующий код HTML:

<article>
  <h2>Роль цитокинов при дорсалгии</h2>
  <p>Автор: Гордон Фримен, канд. физ.-мат. наук</p>
  <p>Содержание статьи</p>
  <address>Почта: [email protected]</address>
  <p>Опубликовано: <time datetime="2018-11-27">27 ноября 2018</time></p>
</article>

Псевдокласс :first-of-type без указания селектора выберет первые элементы каждого типа (<h2>, <p>, <address>, <time>) и установит для них красный цвет текста.

article :first-of-type { color: red; }

При добавлении селектора к :first-of-type сперва выбираются указанные элементы, затем из них берётся первый элемент. Наличие других элементов (<h2> и <address>) и их порядок не учитываются.

article p:first-of-type { color: red; }

Здесь будет выбран первый абзац внутри <article> и выделен красным цветом.

Вместо :first-of-type допустимо использовать :nth-of-type(1).

Синтаксис

Селектор:first-of-type  {  ...  }
Синтаксис
Описание Пример
<тип> Указывает тип значения. <размер>
A && B Значения должны выводиться в указанном порядке. <размер> && <цвет>
A | B Указывает, что надо выбрать только одно значение из предложенных (A или B). normal | small-caps
A || B Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. width || count
[ ] Группирует значения. [ crop || cross ]
* Повторять ноль или больше раз. [,<время>]*
+ Повторять один или больше раз. <число>+
? Указанный тип, слово или группа не является обязательным. inset?
{A, B} Повторять не менее A, но не более B раз. <радиус>{1,4}
# Повторять один или больше раз через запятую. <время>#

Пример

<!DOCTYPE html> <head> <meta charset=»utf-8″> <title>first-of-type</title> <style> table { border-collapse: collapse; /* Убираем двойные границы */ width: 100%; /* Ширина таблицы */ border-spacing: 0; /* Расстояние между ячеек */ } td { border: 1px solid #6A3E14; /* Параметры рамки */ padding: 4px; /* Поля в ячейках */ } tr:first-of-type { background: #808990; /* Цвет фона */ color: #fff; /* Цвет текст */ } td:first-of-type { background: #CFD6D3; /* Цвет фона */ } </style> </head> <body> <table> <tr> <td>&nbsp;</td><td>1998</td><td>1999</td><td>2000</td><td>2001</td> <td>2002</td><td>2003</td> </tr> <tr> <td>Нефть</td> <td>3</td><td>22</td><td>34</td><td>62</td><td>74</td><td>57</td> </tr> <tr> <td>Золото</td> <td>4</td><td>13</td><td>69</td><td>72</td><td>56</td><td>47</td> </tr> <tr> <td>Дерево</td> <td>4</td><td>7</td><td>73</td><td>79</td><td>34</td><td>86</td> </tr> </table> </body> </html>

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

Рис. 1. Результат использования псевдокласса :first-of-type в таблице

Спецификация

Спецификация Статус
Selectors Level 4 Рабочий проект
Selectors Level 3 Рекомендация
Спецификация

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
  • Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft (Черновик спецификации) — первая черновая версия стандарта.

Браузеры

9 12 1 9.5 3.2 3.5
2.1 1 10 3.2
Браузеры

В таблице браузеров применяются следующие обозначения.

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

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

Псевдоклассы

См.

также
  • :first-child и :last-child
  • :first-of-type и :last-of-type
  • :nth-last-child() и :nth-last-of-type()
  • Псевдокласс :first-child
  • Псевдокласс :last-child
  • Псевдокласс :last-of-type

типов CSS — javatpoint

следующий → ← предыдущая

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

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

Без использования CSS сайт не будет выглядеть привлекательно. Существует 3 типов CSS , которые указаны ниже:

  • Встроенный CSS
  • Внутренний/ встроенный CSS
  • Внешний CSS

1. Внутренний CSS

Внутренний CSS имеет Тег