Type css: Атрибут type | htmlbook.ru

Псевдокласс :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}
#	Повторять один или больше раз через запятую.	<время>#

Пример

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

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

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

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

Браузеры

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

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

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

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

См.

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

Псевдоклассы группы type — CSS — Дока

Кратко

Скопировано

Псевдоклассы -of-type позволяют выбирать из группы элементы одного уровня вложенности на основании их порядка:

• :first-of-type — первый;
• :nth-of-type(n-число) — каждый n-й элемент;
• :last-of-type — последний;
• :nth-last-of-type(n-число) — каждый n-й элемент с отсчётом «с конца».

Пример

Скопировано

Допустим, мы имеем такую HTML-разметку:

<ol>  <li>Default означает «по умолчанию», цвет этого пункта без изменений.</li>  <li>Амбары красят в красный цвет, потому что красная краска...</li>  <li>Говорят, в СССР красили подъезды в зелёный цвет, потому что осталось...</li>  <li>В Катаре красят асфальт в синий цвет, чтобы он не перегревался.</li>  <li>Газовые трубы красят в жёлтый цвет по ГОСТ 14202-69.</li>  <li>Розы красят в синий цвет при помощи пищевых красителей.</li>  <li>Чёрный на чёрном не виден.</li></ol>
          
 <ol>
  <li>Default означает «по умолчанию», цвет этого пункта без изменений.</li>
  <li>Амбары красят в красный цвет, потому что красная краска...</li>
  <li>Говорят, в СССР красили подъезды в зелёный цвет, потому что осталось...</li>
  <li>В Катаре красят асфальт в синий цвет, чтобы он не перегревался.  </li>
  <li>Газовые трубы красят в жёлтый цвет по ГОСТ 14202-69.</li>
  <li>Розы красят в синий цвет при помощи пищевых красителей.</li>
  <li>Чёрный на чёрном не виден.</li>
</ol>

И, допустим, нам нужно задать цвет текста каждого из пунктов, основываясь на их порядке.

Этот пункт не имеет класса, всё, что мы о нём знаем — что он третий <li> по порядку:

li:nth-of-type(3) {  color: #41E847;}
          li:nth-of-type(3) {
  color: #41E847;
}

2-й, 4-й, 6-й пункты с классом .list__item имеют синий цвет, т. е. каждый чётный:

.list__item:nth-of-type(2n) {  color: #2E9AFF;}
          .list__item:nth-of-type(2n) {
  color: #2E9AFF;
}

Нечётные элементы записываются как :nth-of-type(2n+1)

5-й <li> (или 3-й . list__item) — жёлтый:

li:nth-of-type(5),.list__item:nth-of-type(3) {  color: #FFD829;}
          li:nth-of-type(5),
.list__item:nth-of-type(3) {
  color: #FFD829;
}

Последний пункт должен быть белым (укажем это и для тега, и для класса):

li:nth-last-of-type(1),.list__item:last-of-type {  color: #FFFFFF;}
          li:nth-last-of-type(1),
.list__item:last-of-type {
  color: #FFFFFF;
}

Если нам нужно выбрать единственный элемент своего родителя, используется псевдокласс :only-of-type (что эквивалентно комбинации

Как пишется

Скопировано

💡 Как и у всех псевдоклассов, слева от :-разделителя можно указать дополнительный селектор, к которому нужно применить правило. Если его не указать, правило будет применено для каждого подходящего элемента.

Для порядковых псевдоклассов (:nth-of-type(n-число) и :nth-last-of-type(n-число)) для обозначения кратности (каждый n-й элемент) используется запись в формате целое число плюс буква n, например:

p:nth-of-type(4n) {  /* Стили */}
          p:nth-of-type(4n) {
  /* Стили */
}

Будет выбран каждый 4-й элемент (если таковой будет в общем родителе на одном уровне вложенности).

Для обозначения чётных или нечётных элементов можно использовать числовое выражение.

Выберет все чётные элементы:

p:nth-of-type(2n) {  /* Стили */}
          p:nth-of-type(2n) {
  /* Стили */
}

Выберет все нечётные элементы:

p:nth-of-type(2n + 1) {  /* Стили */}
          p:nth-of-type(2n + 1) {
  /* Стили */
}

Также для обозначения чётных или нечётных элементов можно использовать именованную форму:

Выберет все чётные элементы — то же самое, что p:nth-of-type(2n):

p:nth-of-type(even) {  /* Стили */}
          p:nth-of-type(even) {
  /* Стили */
}

Выберет все нечётные элементы — то же самое, что p:nth-of-type(2n+1):

p:nth-of-type(odd) {  /* Стили */}
          p:nth-of-type(odd) {
  /* Стили */
}

Аргументы

Скопировано

Для числовых псевдоклассов (:nth-of-type(n) и :nth-last-of-type(n)) обязательно наличие n-числа в аргументах.

Подсказки

Скопировано

💡 Выбор первого (:first-of-type) или последнего (:last-of-type) элемента «грамматически» эквивалентен числовому формату — :nth-of-type(1) для первого элемента и :nth-last-of-type(1) для последнего соответственно, но не требует указания числа-аргумента.

💡 Если нужно выбрать такой элемент, который внутри своего родителя только в единственном экземпляре, используйте :only-of-type.

На практике

Скопировано

Realetive советует

Скопировано

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

Селекторы типа, класса и идентификатора — Изучите веб-разработку

• Предыдущий
• Обзор: строительные блоки
• Следующий

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

Селектор типа иногда называют селектором имени тега или селектором элемента , поскольку он выбирает тег/элемент HTML в вашем документе. В приведенном ниже примере мы использовали селекторы span , em и strong .

Попробуйте добавить правило CSS, чтобы выбрать элемент

Универсальный селектор обозначен звездочкой ( * ). Он выбирает все в документе (или внутри родительского элемента, если он связан вместе с другим элементом и комбинатором-потомком). В следующем примере мы используем универсальный селектор, чтобы удалить поля для всех элементов. Вместо стиля по умолчанию, добавленного браузером, который разделяет заголовки и абзацы с полями, все расположено близко друг к другу.

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

Использование универсального селектора для облегчения чтения селекторов

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

 article :first-child {
  вес шрифта: полужирный;
}
 

 article *:first-child {
  вес шрифта: полужирный;
}