Товаров: 0 (0р.)

First type of css: :first-of-type — Веб-технологии для разработчиков

Содержание

Псевдокласс :first-of-type | CSS | 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 в таблице

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

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

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

Браузеры

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

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

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

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

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

Последнее изменение: 06.08.2018

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

Псевдокласс :first-of-type | CSS справочник

CSS селекторы

Значение и применение

Псевдокласс :first-of-type применяет заданный стиль к элементу, который является первым дочерним элементом определенного типа внутри родительского элемента.

Отличие псевдокласса :first-of-type от :first-child заключается в том, что он выбирает первый дочерний элемент определенного типа, а не первый дочерний элемент этого типа.

Поддержка браузерами

CSS синтаксис:

:first-of-type {
блок объявлений;
}

Версия CSS

CSS3

Пример использования

Рассмотрим пример, в котором главное содержимое страницы заключено в блоки <div>, которые имеют стилевой класс .test, и Вам необходимо придать определённый стиль первым абзацам (элементы <p>) в этих блоках:

<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title>Псевдокласс :first-of-type</title>
<style>

 
.test p:first-of-type { /* используем селектор потомков с псевдоклассом :first-of-type */
background-color: orange; /* устанавливаем цвет заднего фона */
font-weight: bold; /* устанавливаем жирное начертание текста */
}
</style>
</head>
	<body>
		<div class = "test">
			<h3>Заголовок второго уровня</h3>
			<p>Абзац один</p>
			<p>Абзац два</p>
			<p>Абзац три</p>
		</div>
		<div class = "test"> 
			<h3>Заголовок второго уровня</h3>
			<p>Абзац один</p>
			<p>Абзац два</p>
			<p>Абзац три</p>
		</div>
	</body>
</html>

В этом примере с использованием псевдокласса

:first-of-type мы стилизовали первые абзацы внутри каждого блока.

Результат нашего примера:

Пример использования псевдокласса :first-of-type.CSS селекторы

Знакомство со структурным селектором CSS3 :first-of-type

Как хорошо что в CSS3 добавились новые селекторы, позволяющие обращаться к определенным элементам, не используя классы, идентификаторы или другие свойства элемента! В этом уроке мы расскажем о селекторе :first-of-type.

 

 

Cелектор :first-of-type обратится к первому элементу определенного типа, например, в отрывке кода ниже стиль задается для первого h3 на веб-странице.

h3:first-of-type {
    /* объявление стилей */
}

Cелектор :first-of-type также равен селектору :nth-of-type(1), так что мы можем обратиться не только к первому элементу определенного типа, но и ко второму, третьему и так далее. В следующем отрывке кода мы обратимся ко второму элементу h3 на веб-странице.

h3:nth-of-type(2) {
    /* объявление стилей */
} 

Сравнение селекторов :first-of-type и :first-child 

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

К примеру, у нас есть пять элементов p в одном блоке, следующим образом:

<div>
    <p>Pragraph 1</p>
    <p>Pragraph 2</p>
    <p>Pragraph 3</p>
    <p>Pragraph 4</p>
    <p>Pragraph 5</p>
</div>

Теперь мы обратимся к первому элементу p, используя селектор :first-child.

p:first-child {
    padding: 5px 10px;
    border-radius: 2px;
    background: #8960a7;
    color: #fff;
    border: 1px solid #5b456a;
} 

И теперь, как мы и предполагали, мы успешно обратились к первому элементу p.

Демонстрация работы селектора :first-child

Однако, если мы добавим элемент другого типа до первого элемента p, например, элемент h2, как в отрывке кода ниже:

<div>
    <h2>Heading 1</h2>
    <p>Pragraph 1</p>
    <p>Pragraph 2</p>
    <p>Pragraph 3</p>
    <p>Pragraph 4</p>
    <p>Pragraph 5</p>
</div> 

То мы обратимся не к первому элементу p, так как первый вложенный элемент в блоке теперь не p, а h2.

Так что в этой ситуации селектор :first-of-type решит проблему.

p:first-of-type {
    padding: 5px 10px;
    border-radius: 2px;
    background: #a8b700;
    color: #fff;
    border: 1px solid #597500;
}

Демонстрация работы селектора :first-of-type

Селектор последнего элемента 

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

У двух селекторов, о которых мы рассказали выше, есть противоположные селекторы:  :last-child и :last-of-type. Работают они так же, как и два предыдущих, за исключением того, что они обращаются к последним элементам.

Например, в отрывке кода ниже мы обратимся к последнему элементу p в блоке.

p:last-child {
    padding: 5px 10px;
    border-radius: 2px;
    background: #8960a7;
    color: #fff;
    border: 1px solid #5b456a;
} 

Демонстрация работы селектора :last-child

А в этом отрывке кода мы обратимся к последнему элементу p в такой же ситуации, как мы описывали выше, на этот раз сразу за <p> расположен другой элемент.

p:last-of-type {
    padding: 5px 10px;
    border-radius: 2px;
    background: #a8b700;
    color: #fff;
    border: 1px solid #597500;
} 

Демонстрация работы селектора :last-of-type

Библиотека JavaScript Selectivizr 

Как и другие новые возможности в CSS3, эти селекторы не поддерживаются старыми версиями браузеров, в основном браузером Internet Explorer версий с 6 до 8, кроме селектора :first-child, так как он был добавлен, начиная с CSS версии 2.1. Близкий к нему селектор :last-child был добавлен только в CSS версии 3.

Так что, если упомянутые нами селекторы действительно нужны на Вашем сайте, Вы можете воспользоваться библиотекой JavaScript Selectivizr, чтобы воспроизвести функциональность селекторов CSS3.

Selectivizr для работы нужны другие библиотеки JavaScript, такие как jQuery, Dojo, Prototype и MooTools, и из таблицы сравнения на официальном сайте видно, что MooTools может работать со всеми селекторами.

Так что давайте включим эту библиотеку вместе с Selectivizr следующим образом:

<!--[если браузер IE 8]> 
<script type="text/javascript" src="mootools.js"></script>
<script type="text/javascript" src="selectivizr.js"></script>
<![конец условия]--> 

Комментарий с условием выше гарантирует, что эти библиотеки будут загружены только в браузере Internet Explorer версии 8 и ниже.

Наконец, Вы можете посмотреть пример по следующим ссылкам, и он теперь должен работать как в современных, так и в старых браузерах, таких как Internet Explorer версии 8 и ниже. Вы также можете скачать исходный код для дальнейшего ознакомления. Наслаждайтесь.

Демонстрация работы – Скачать исходный код

Автор урока Thoriq Firdaus

Перевод — Дежурка

Смотрите также:

Псевдокласс :first-child | htmlbook.ru

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
7.0+1.0+3.5+1.0+1.0+1.0+1.0+

Краткая информация

Версии CSS

CSS 1CSS 2CSS 2.1CSS 3

Описание

Псевдокласс :first-child применяет стилевое оформление к первому дочернему элементу своего родителя.

Синтаксис

элемент:first-child { … }

Значения

Нет.

Пример 1

XHTML 1.0CSS2.1IECrOpSaFx

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>first-child</title>
  <style type="text/css">
    B:first-child {
     color: red; /* Красный цвет текста */
    }
  </style>
 </head>
 <body>
   <p><b>Lorem ipsum</b> dolor sit amet, <b>consectetuer</b> 
   adipiscing <b>elit</b>, sed diem nonummy nibh euismod tincidunt ut lacreet 
   dolore magna aliguam erat volutpat.</p>
   <p><b>Ut wisis enim</b> ad minim veniam, <b>quis nostrud</b> 
   exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea <b>commodo 
   consequat</b>.</p>
 </body>
</html>

Результат примера показан на рис. 1. В данном примере псевдокласс :first-child добавляется к селектору b и устанавливает для него красный цвет текста. Хотя контейнер <b> встречается в первом абзаце три раза, красным цветом будет выделено лишь первое упоминание, т.е. текст «Lorem ipsum». В остальных случаях содержимое контейнера <b> отображается черным цветом. Со следующим абзацем все начинается снова, поскольку родительский элемент поменялся. Поэтому фраза «Ut wisis enim» также будет выделена красным цветом.

Рис. 1. Выделение цветом первого дочернего элемента абзаца

Пример 2

HTML5CSS2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Меню</title>
  <style>
   .links { 
    background: #F6967D; /* Цвет фона */
   }
   .links a {
    color: #FFFDEB; /* Цвет ссылок */
    display: inline-block; /* Строчно-блочный элемент */
    border-left: 1px solid #B62025; /* Параметры рамки слева */
    padding: 5px 10px; /* Поля вокруг ссылок */
   }
   .links a:first-child {
    border-left: none; /* Убираем первую линию слева */
   }
  </style>
 </head>
 <body>
  <div>
    <a href="1.html">uno</a>
    <a href="2.html">dos</a>
    <a href="3.html">tres</a>
    <a href="4.html">cuatro</a>
  </div>
 </body>
</html>

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

Рис. 2. Ссылки с линией слева

Псевдокласс :first-child | CSS | WebReference

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

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

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

Псевдокласс :first-child без указания селектора выберет все первые элементы внутри <article> и установит для них красный цвет текста. Здесь первыми идут <h2> и <time>, они и будут выбраны.

article :first-child { color: red; }

При добавлении селектора к :first-child сперва берётся первый элемент, затем смотрится какого он типа. Если элемент совпадает с указанным селектором, то он будет выбран. Таким образом, выбирается элемент, если он удовлетворяет двум условиям одновременно: это первый элемент и это элемент указанного типа. Здесь красным цветом будет выделен заголовок, поскольку первым идёт именно <h2>.

article h2:first-child { color: red; }

Если вместо h2 использовать другой селектор, то ничего выбрано не будет, поскольку не выполняется условие «первый элемент это <p>».

article p:first-child { color: red; }

Для выбора первого элемента определённого типа используйте псевдокласс :first-of-type.

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

Синтаксис 

Селектор:first-child { ... }

Обозначения

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

Пример

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>first-child</title> <style> B:first-child { color: red; /* Красный цвет текста */ } </style> </head> <body> <p><b>Lorem ipsum</b> dolor sit amet, <b>consectetuer</b> adipiscing <b>elit</b>, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</p> <p><b>Ut wisis enim</b> ad minim veniam, <b>quis nostrud</b> exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea <b>commodo consequat</b>.</p> </body> </html>

Результат примера показан на рис. 1. В данном примере псевдокласс :first-child добавляется к селектору b и устанавливает для него красный цвет текста. Хотя контейнер <b> встречается в первом абзаце три раза, красным цветом будет выделено лишь первое упоминание, т. е. текст «Lorem ipsum». В остальных случаях содержимое контейнера <b> отображается чёрным цветом. Со следующим абзацем всё начинается снова, поскольку родительский элемент поменялся. Поэтому фраза «Ut wisis enim» также будет выделена красным цветом.

Рис. 1. Выделение цветом первого дочернего элемента абзаца

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>Меню</title> <style> .links { background: #F6967D; /* Цвет фона */ } .links a { color: #FFFDEB; /* Цвет ссылок */ display: inline-block; /* Строчно-блочный элемент */ border-left: 1px solid #B62025; /* Параметры рамки слева */ padding: 5px 10px; /* Поля вокруг ссылок */ } .links a:first-child { border-left: none; /* Убираем первую линию слева */ } </style> </head> <body> <div> <a href=»page/1.html»>uno</a> <a href=»page/2.html»>dos</a> <a href=»page/3.html»>tres</a> <a href=»page/4.html»>cuatro</a> </div> </body> </html>

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

Рис. 2. Ссылки с линией слева

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

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

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

Браузеры

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

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

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

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

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

Последнее изменение: 06.08.2018

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

:nth-of-type — Веб-технологии для разработчиков

CSS псевдокласс :nth-of-type() находит один или более элементов с заданным тегом, основываясь на их позиции среди группы соседних элементов.

/* Выбирает каждый четвёртый элемент <p>
   среди любой группы соседних элементов. */
p:nth-of-type(4n) {
  color: lime;
}

Синтаксис

Псевдокласс nth-of-type указывается с единственным аргументом, описывающим паттерн для выбора элементов.

Более детальное описание синтаксиса может быть найдено на странице псевдокласса :nth-child.

Формальный синтаксис

:nth-of-type( <nth> )
где 
<nth> = <an-plus-b> | even | odd

Примеры

Базовый пример

HTML
<div>
  <div>Этот элемент не учитывается.</div>
  <p>Первый параграф.</p>
  <p>Второй параграф.</p>
  <div>Этот элемент не учитывается.</div>
  <p>Третий параграф.</p>
  <p>Четвёртый параграф.</p>
</div>
CSS
/* Нечётные параграфы */
p:nth-of-type(2n+1) {
  color: red;
}

/* Чётные параграфы */
p:nth-of-type(2n) {
  color: blue;
}

/* Первый параграф */
p:nth-of-type(1) {
  font-weight: bold;
}
Результат

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

Поддержка браузерами

Update compatibility data on GitHub
КомпьютерыМобильные
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidFirefox для AndroidOpera для AndroidSafari on iOSSamsung Internet
:nth-of-type()Chrome Полная поддержка 1Edge Полная поддержка 12
Полная поддержка 12
Замечания Before Edge 16, Microsoft Edge treats all unknown elements (such as custom elements) as the same element type.
Firefox Полная поддержка 3.5IE Полная поддержка 9
Полная поддержка 9
Замечания Internet Explorer treats all unknown elements (such as custom elements) as the same element type.
Opera Полная поддержка 9.5Safari Полная поддержка 3.1WebView Android Полная поддержка 2Chrome Android Полная поддержка 18Firefox Android Полная поддержка 4Opera Android Полная поддержка 10.1Safari iOS Полная поддержка 3.1Samsung Internet Android Полная поддержка 1.0

Легенда

Полная поддержка  
Полная поддержка
Смотрите замечания реализации.
Смотрите замечания реализации.

См. также

Псевдокласс: первоклассный | CSS | WebReference

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

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

  

   
 Роль цитокинов при дорсалгии 
 
  
 Автор: Гордон Фримен, канд. физ.-мат. наук 

  
 Содержание статьи 

  <адрес> Почта: [email protected] 
  
 Опубликовано:

Псевдокласс: первоклассный без указаний селектора выберет первые элементы каждого типа (

,

,

,

Как часто можно делать клизму грудничку: рекомендации педиатров

Почему новорожденный не спит ночью: 11 главных причин и способы решения проблемы

Как успокоить плачущего ребенка: 10 эффективных способов

Что нужно новорожденному на первое время: полный список необходимых вещей

Пеленки для новорожденных: виды, размеры и способы использования

Детская кроватка для новорожденного: как правильно выбрать

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *