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

Css first element: :first-child — CSS | MDN

Содержание

Псевдокласс :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

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

Псевдо-элемент ::first-line | CSS селектор

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

12.0+ 9.0+ 1.0+ 1.0+ 7.0+
1.0+

Описание

Псевдо-элемент ::first-line применяет заданный стиль к первой строке указанного элемента. Обратите внимание, что длина первой строки зависит от целого ряда факторов, включая ширину страницы или элемента, размер шрифта и т.д.

В блоке объявлений для псевдо-элемента ::first-line возможно использование следующих свойств:

  • Свойства font
  • Свойства color
  • Свойства background
  • word-spacing
  • letter-spacing
  • text-decoration
  • vertical-align
  • text-transform
  • line-height
  • clear
Пример:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Пример</title> <style> p::first-line { background-color:aqua; } </style> </head> <body> <h2>Всемирный фонд дикой природы</h2> <p>Для остановки деградации естественной среды планеты и постройки будущего, в котором люди живут в гармонии с природой, нужно содействовать уменьшению загрязнения и расточительного потребления природных ресурсов.</p> </body> </html>
Результат данного примера:

Всемирный фонд дикой природы

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

Использование селекторов first-of-type, first-child и nth-of-type

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

Если постараться сократить использование идентификаторов, классов и встроенного в HTML кода CSS, так как это зачастую неэффективно, то остаются два решения для создания особого внешнего вида у элементов, появляющихся впервые.

Псевдокласс first-child

Псевдокласс first-child (первенец) задает свойства первому элементу в данном случае. Например, чтобы выбрать первый элемент в теге body, если это абзац, можно использовать следующий код CSS:

body p:first-child {
        font-weight: 800;
}

Вероятно, будет понятней, если прочитать этот селектор задом наперед: если первый элемент внутри тега body – это абзац, то делаем его шрифт жирным.

Хотя таким образом можно обратиться к первому абзацу, только если до него нет других элементов: если перед абзацем есть заголовок, то этот абзац уже не первый элемент в теге body и такой селектор его не выберет.

Псевдоклассы first-of-type и nth-of-type

Хотя такой подход встречается реже, лучшим и наиболее гибким решением будет использование псевдокласса first-of-type (первый этого типа) или nth-of-type (энный этого типа). Здесь все очень просто, эти псевдоклассы делают именно то, что можно ожидать, судя по их названию: обращаются к первому или энному элементу в данном случае. Таким образом, чтобы выбрать первый абзац на странице, как в примере выше, воспользуемся таким кодом CSS:

p:first-of-type {
        font-style: italic;
}

Или таким:

p:nth-of-type(1) {
        font-style: italic;
}

Число в круглых скобках в конце селектора указывает, какой элемент будет выбран: 1 означает первый подходящий элемент, 2 — второй и так далее. Также возможно поместить в круглые скобки формулу.

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

article p:first-of-type:first-line {
        font-feature-settings:"smcp";
}

С помощью подходящих приставок производителей для свойства настроек особенностей шрифта объявление выше выберет первую строку первого абзаца на любой странице и отобразит ее в настоящих малых заглавных или капители.

Автор урока Dudley Storey

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

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

: первый в своем роде | CSS-уловки

Селектор : first-of-type в CSS позволяет настроить таргетинг на первое появление элемента в его контейнере. Он определен в спецификации CSS Selectors Level 3 как «структурный псевдокласс», что означает, что он используется для стилизации контента на основе его отношений с родительским и родственным контентом.

Допустим, у нас есть статья с заголовком и несколькими абзацами:

  <статья>
   

Заголовок

Пункт 1.

Пункт 2

Пункт 3

Мы хотим сделать первый абзац больше, как своего рода «lede» или вводный абзац. Вместо того, чтобы давать ему класс, мы можем использовать : first-of-type , чтобы выбрать его:

  п: первоклассный {
  размер шрифта: 1.25em;
}  

Использование : first-of-type очень похоже на : nth-child , но с одним критическим отличием : оно менее специфично.В приведенном выше примере, если бы мы использовали p: nth-child (1) , ничего бы не произошло, потому что абзац не является первым дочерним элементом своего родителя (

). Это раскрывает мощь : первый тип : он нацелен на конкретный тип элемента в определенном расположении по отношению к аналогичным братьям и сестрам, а не ко всем братьям и сестрам .

Более полный пример ниже демонстрирует использование : first-of-type и связанного с ним селектора псевдокласса : last-of-type .

  Оцените эту ручку! 

Другие ресурсы

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

Хром Safari Firefox Opera IE Android iOS
Завод 3.2+ Работы 9,5+ 9+ Работы Работы

: первый тип был представлен в модуле CSS Selectors Module 3, что означает, что старые версии браузеров не поддерживают его.Однако поддержка современных браузеров безупречна, а новые псевдоселекторы широко используются в производственных средах. Если вам нужна более старая поддержка браузера, используйте polyfill для IE или используйте эти селекторы некритическими способами, например, с прогрессивным улучшением, что рекомендуется.

: первенец | CSS-уловки

Селектор : first-child позволяет выбрать первый элемент сразу внутри другого элемента. Он определен в спецификации CSS Selectors Level 3 как «структурный псевдокласс», что означает, что он используется для стилизации контента на основе его отношений с родительским и родственным контентом.

Предположим, у нас есть статья и мы хотим сделать первый абзац больше — например, «lede» или отрывок вводного текста:

  <статья>
  

Первый абзац ...

Lorem ipsum ...

Долор сиди амет ...

Consectetur adipisicing ...

Вместо того, чтобы давать ему класс (например, . First ), мы можем использовать : first-child , чтобы выбрать его:

  р: первенец {
  размер шрифта: 1.5em;
}  

Использование : first-child очень похоже на : first-of-type , но с одним критическим отличием : оно менее специфично. : first-child будет пытаться сопоставить только непосредственного первого дочернего элемента родительского элемента, в то время как first-of-type будет соответствовать первому вхождению указанного элемента, даже если он не идет абсолютно первым в HTML . В приведенном выше примере результат будет таким же, только потому, что первый дочерний элемент article также оказывается первым элементом p .Это раскрывает мощь : first-child : он может идентифицировать элемент по отношению ко всем его братьям и сестрам, , а не только братьям и сестрам того же типа .

Более полный пример ниже демонстрирует использование : first-child и связанного селектора псевдокласса : last-child .

  Оцените эту ручку! 

Другие ресурсы

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

Хром Safari Firefox Opera IE Android iOS
Любая 3.2+ Любая 9,5+ 9+ Любая любой

: first-child был введен в модуле CSS Selectors Module 3, что означает, что старые версии браузеров не поддерживают его. Однако поддержка современных браузеров безупречна, а новые псевдоселекторы широко используются в производственных средах. Если вам нужна более старая поддержка браузера, используйте polyfill для IE или используйте эти селекторы некритическими способами, например, с прогрессивным улучшением, что рекомендуется.

CSS: выберите первоклассный с последующим родственным комбинатором

Веб-разработчикам доступно множество CSS-селекторов, но иногда их все же недостаточно. Я обнаружил это недавно, создавая раздел разговора на моем сайте, и хотел использовать несуществующий псевдокласс : first-of-class для применения некоторых стилей.

Проблема

Псевдокласс : first-of-type существует, но он ограничен. Это частный случай псевдокласса : nth-of-type () .Из спецификации (выделено мной):

Обозначение псевдокласса: nth-of-type (An + B) представляет те же элементы, которым может соответствовать: nth-child (| An + B | of S), , где S — селектор типа и префикс пространства имен, соответствующий рассматриваемому элементу.

Это означает, что при использовании : nth-of-type () или : first-of-type селектор может быть только селектором типа. То есть вы можете ссылаться непосредственно на элементы, например

или

, только при использовании : first-of-type .Итак, если у вас был следующий HTML:

  

Это абзац 1

Это абзац 2

Это абзац 3

И этот CSS:

  div p {color: # 333; }
div p: first-of-type {цвет: красный; }
div p.special: first-of-type {цвет: зеленый; }
  

Вы можете ожидать, что абзац 1 будет окрашен в красный цвет, а абзац 2 — в зеленый. Но div p.special не является селектором типа, поэтому : first-of-type здесь не применяется, и ничего зеленого.

Последующий родственный комбинатор

Эту проблему можно решить с помощью техники, созданной Дэниелом Таном и Лией Веру и опубликованной на Stack Overflow. Вместо того, чтобы использовать псевдоклассы вообще, мы можем использовать комбинатор последующих или общих братьев и сестер.

Последующий родственный комбинатор выглядит как A ~ B , где A и B — это два составных селектора (а не только селекторы типов). Он позволяет выбрать B , где A и B имеют общий родительский элемент, а A предшествует B в документе.

В следующем HTML-коде селектор h3 ~ p выберет второй

, поскольку он следует за

, но не за первым

.

  

Заголовок

Мета-данные

Подзаголовок

Текст статьи

Последующий родственный комбинатор и: первоклассный

Уловка использования комбинатора для имитации псевдо-класса : first-of-class заключается в использовании обычного селектора для стилизации всех элементов класса в соответствии с желаемым стилем.Затем используйте комбинатор, чтобы отключить его для всех элементов, кроме первого. В нашем исходном примере CSS теперь выглядит так:

  div p {color: # 333; }
div p: first-of-type {цвет: красный; }
div p.special {цвет: зеленый; }
div p.special ~ p.special {цвет: # 333; }
  

Теперь первый абзац будет красным, второй — зеленым, а последний — серым. Вы можете увидеть живой пример этого на Codepen.

Селекторы CSS, уровень 4

Опубликовав это, Шиме Видас указал в Твиттере, что будущее CSS имеет больше надежд для этого стиля селектора.В спецификации CSS Selectors уровня 4 псевдокласс : nth-child () принимает аргумент, который выглядит так: An + B [of S]? . Часть An + B означает, что вы можете предоставить функцию для вычисления, что такое n , но необязательный из S означает, что псевдокласс будет соответствовать N-му элементу, который соответствует селектору.

Это означает, что мы можем обновить наш пример, чтобы использовать : nth-child () вместо двух правил, как мы делали выше. Посмотрите CSS ниже:

  div p {color: # 333; }
div p: first-of-type {цвет: красный; }
div: nth-child (1 из стр.специальный) {цвет: зеленый; }
  

Использование : nth-child (1 из p.special) означает, что мы выбираем первого дочернего элемента

, то есть

с классом «special». Это именно то, что я хотел.

Единственный недостаток этой техники? Сейчас это работает только в Safari. Я обновил Codepen, проверьте его в Safari, чтобы увидеть, как все ваши будущие мечты о селекторах сбываются.

Взлом CSS по-прежнему весело

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

Спасибо Дэниелу и Ли за то, что они поделились своими решениями по Stack Overflow, и, в частности, Дэниелу, ответ которого более подробно описывает недоразумения селектора CSS и псевдоклассов.

Может быть, однажды мы увидим псевдокласс : first-of-class . С последней версией : nth-child () , возможно, нам даже не понадобится : first-of-class , мы просто ждем поддержки браузера.А пока последующий комбинатор-брат остается нашим другом.

CSS: селектор первого ребенка


В этом руководстве по CSS объясняется, как использовать селектор CSS под названием : first-child с синтаксисом и примерами.

Описание

Селектор CSS: first-child позволяет выбрать элемент, который является первым дочерним элементом в пределах своего родителя.

Синтаксис

Синтаксис CSS-селектора: active:

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

Параметры или аргументы

элемент
Первый элемент этого типа в родительском элементе.
style_properties
Стили CSS, применяемые к первому дочернему элементу.

Примечание

  • Селектор: first-child — это псевдокласс, который позволяет вам выбрать элемент, который является первым дочерним элементом в пределах своего родителя.
  • См. Также: селекторы: last-child,: nth-child,: nth-last_child и: only-child.
  • В IE8 стиль: first-child не применяется до тех пор, пока ссылка не теряет фокус, если элемент вставляется динамически при нажатии на ссылку.

Совместимость с браузером

Селектор CSS: first-child имеет базовую поддержку в следующих браузерах:

  • Хром
  • Android
  • Firefox (Gecko)
  • Firefox Mobile (Gecko)
  • Internet Explorer 7+ (IE 7+)
  • IE Телефон 7+
  • Opera 9.5+
  • Opera Mobile 10+
  • Safari (WebKit)
  • Safari Mobile

Пример

Мы обсудим селектор: first-child ниже, исследуя примеры того, как использовать этот селектор в CSS для применения стиля к первому элементу.

С тегом

Давайте посмотрим на пример CSS: first-child, в котором мы применяем селектор: first-child к тегу .

CSS будет выглядеть так:

  span: first-child {font-weight: bold; красный цвет; }  

HTML будет выглядеть так:

  

Вот 2 сайта: techonthenet.com и checkyourmath.com .

Результат будет выглядеть следующим образом (селектор: first-child будет стилизовать теги следующим образом):

Здесь: пример первого ребенка, текст «techonthenet.com «, который находится внутри первого тега , будет отображаться как текст, выделенный красным жирным шрифтом. Текст» checkyourmath.com «во втором теге не будет стилизован селектором: first-child.

С тегом

Давайте посмотрим на пример CSS: first-child, в котором мы применяем селектор: first-child к тегу

.

CSS будет выглядеть так:

  р: первенец {цвет: синий; }  

HTML будет выглядеть так:

  

Это первый абзац, написанный techonthenet.com.

Это второй абзац, написанный techonthenet.com.

Результат будет выглядеть следующим образом (селектор: first-child будет стилизовать теги

следующим образом):

В этом примере: first-child цвет текста в первом теге

будет синим. Второй тег

не будет стилизован селектором: first-child.

С тегом

Давайте посмотрим на пример CSS: first-child, в котором мы применяем селектор: first-child к тегу.

CSS будет выглядеть так:

  tr: первенец {фон: желтый; }  

HTML будет выглядеть так:

  <таблица>
  
     Заголовок столбца 1 
     Заголовок столбца 2 
  
  
     techonthenet.com 
     Технический справочный сайт 
  
  
     checkyourmath.com 
     Сайт математических вычислений 
  
  
     bigactivities.com 
     Детский сайт 
  
  

Результат будет выглядеть следующим образом (селектор: first-child будет стилизовать теги следующим образом):

В этом примере CSS: first-child первая строка (т.е. первый тег) будет иметь желтый цвет фона. Все остальные строки в таблице не будут стилизованы селектором: first-child.

CSS: не селектор | SamanthaMing.com

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

Разрешенные аргументы

В текущем черновике, CSS-селекторы уровня 3, вы можете передать только простой селектор в качестве аргумента.

Простые селекторы:

  • Селектор типов
  • Универсальный селектор
  • Селектор атрибутов
  • Селектор классов
  • Селектор идентификаторов
  • Псевдо-класс

CSS2ASplaining Кратко как

CSS2AS версии.У CSS тоже есть разные версии. Однако, в отличие от ECMAScript, где все находится в одной огромной категории (ES5, ES6, ES7), CSS работает по частям.

Например, у них есть CSS-селекторов уровня 3 , CSS Grid Layout Level 1 и CSS Flexbox Level 1 . Селектор : not подпадает под спецификацию CSS Selectors Level 3. Следующее, над чем работает рабочая группа CSS, это … намек, что следует после 3 … ding ding, CSS Selectors Level 4 😜

Рэйчел Эндрю написала фантастическую статью, объясняющую уровни CSS, я также связал ее в Раздел ресурсов, так что прочтите, если вам интересно 🤓

Передача списка селекторов

В текущей версии вы можете передавать только простые селекторы в качестве аргумента.Однако на уровне 4 селекторов CSS вы сможете передать список селекторов. Так здорово, верно 👏.

И вот что будет выбрано

Вложенные отрицания не разрешены 🙈

Следует отметить, что отрицания могут не быть вложенными. Итак, это нет-нет:

: первый ребенок vs : первый тип

Давайте начнем с определения их индивидуально:

: первый ребенок выбирает только первый элемент, ЕСЛИ это первый ребенок своего родителя.Это означает, что если это не первый дочерний элемент родителя, ничего не будет выбрано.

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

Хорошо, давайте рассмотрим несколько примеров.

Все дочерние типы относятся к одному и тому же типу

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

Дети бывают разных типов

НО , потому что p уже не первый ребенок. Если вы позвоните по номеру p: first-child , НИЧЕГО не будет выбрано.

Выбор первого ребенка

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

Другой аналогичный псевдокласс CSS

И это понимание применимо к другим классам двоюродных братьев:

  • : последний ребенок и : последний тип
  • : nth-child и : nth-of-type
  • : only-child и only-of-type

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

Селектор : not поддерживается большинством современных браузеров и Internet Explorer 9 и выше.

Совместимость с браузером

@hkfoster: Еще пара однострочников, которые тоже делают это:

  • li: nth-of-type (n + 2)
  • li ~ li

@vels_io: li + li {...}

@ andr3: Это мощный инструмент, и, как и все остальное, следует использовать ответственно. В нашем примере вы можете обойтись простым:

Ресурсы

Что такое первый дочерний элемент в CSS?

first-child — это псевдокласс в CSS, который представляет первый элемент среди группы родственных элементов.Селектор : first-child используется для определения стиля первого дочернего элемента его родителя.

Синтаксис:

: first-child {
 //имущество
} 

Пример:

HTML

CSS: Псевдо-класс первого типа - Изучение CSS

CSS: Псевдо-класс первого типа - Изучение CSS | W3Docs

Псевдокласс CSS: first-of-type выбирает элемент, который является первым элементом своего типа в списке дочерних элементов своего родителя.Это то же самое, что: nth-of-type.

Селектор: first-of-type на самом деле похож на: nth-child, но есть разница: он менее конкретен. Селектор: first-of-type нацелен на определенный тип элемента в расположении только по отношению к аналогичным братьям и сестрам.

Начиная с уровня селекторов 4, от выбранного элемента не требуется наличие родителя.

Версия¶

Селекторы уровня 3

Селекторы уровня 4

Синтаксис¶

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

Пример селектора: first-of-type: ¶

  

  
     Название документа 
    <стиль>
      p: first-of-type {
        фон: # 8ebf42;
      }
    
  
  
     

: пример селектора первого типа

Пункт 1

Пункт 2

Пункт 3

Попробуйте сами »

Пример селектора: first-of-type с тегом

: ¶
  

  
     Название документа 
    <стиль>
      p: first-of-type {
        размер шрифта: 22 пикселя;
        цвет: # 777777;
      }
    
  
  
     

: пример селектора первого типа

<статья>

Это заголовок.

Lorem Ipsum - это просто фиктивный текст для полиграфической и наборной индустрии.

Lorem Ipsum - это просто фиктивный текст для полиграфической и наборной индустрии. .

Lorem Ipsum - это просто фиктивный текст для полиграфической и наборной индустрии. .

Попробуйте сами »

Пример селектора: first-of-type с некоторыми тегами HTML: ¶

   Название документа <стиль> п {
 маржа: 0;
 }
 article: first-of-type {
 цвет фона: # 777777;
 цвет: #ffffff;
 } 

: пример селектора первого типа

<статья>

Это первый элемент!

Эта вложенная 'em' первая !

Это вложенное «сильное» первое , но это вложенное «сильное» - последнее !

Этот вложенный "диапазон" получает стиль !

Это элемент "q"!

Это последний элемент.

alexxlab

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

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

< html >

< стиль >

p: первенец {

фон: салатовый;

цвет: белый;

стиль шрифта: курсив;

размер шрифта: 1.875em;

}

стиль >

головка >

0003

< p > Я первый ребенок. p >

< p > Я второй ребенок. p >

< p > Я третий ребенок. p >

< p> p> ребенок. p >

body >

html >

62

5