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. Выделение цветом первого дочернего элемента абзаца
<!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. Ссылки с линией слева
Спецификация
Каждая спецификация проходит несколько стадий одобрения.
- Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
- Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
- Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
- Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
- Draft (Черновик спецификации) — первая черновая версия стандарта.
Браузеры
В таблице браузеров применяются следующие обозначения.
- — свойство полностью поддерживается браузером со всеми допустимыми значениями;
- — свойство браузером не воспринимается и игнорируется;
- — при работе возможно появление различных ошибок, либо свойство поддерживается лишь частично, например, не все допустимые значения действуют или свойство применяется не ко всем элементам, которые указаны в спецификации.
Число указывает версию браузера, начиная с которой свойство поддерживается.
Автор и редакторы
Автор: Влад Мержевич
Последнее изменение: 06.08.2018
Редакторы: Влад Мержевич
Псевдо-элемент ::first-line | CSS селектор
Поддержка браузерами
| 12.0+ | 9.0+ | 1.0+ | 1.0+ | 7.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 из стр.специальный) {цвет: зеленый; }
Использование Единственный недостаток этой техники? Сейчас это работает только в Safari. Я обновил Codepen, проверьте его в Safari, чтобы увидеть, как все ваши будущие мечты о селекторах сбываются. Я пишу CSS то и дело, уже более десяти лет, и хотя все современные возможности CSS верстки означают, что взлома намного меньше, иногда вам нужно придумать творческое решение проблемы.Я мог бы решить эту проблему с помощью дополнительного класса или перестановки моего HTML, но когда CSS может сделать эту работу за вас, это приносит большее удовлетворение. Спасибо Дэниелу и Ли за то, что они поделились своими решениями по Stack Overflow, и, в частности, Дэниелу, ответ которого более подробно описывает недоразумения селектора CSS и псевдоклассов. Может быть, однажды мы увидим псевдокласс В этом руководстве по CSS объясняется, как использовать селектор CSS под названием : first-child с синтаксисом и примерами. Селектор CSS: first-child позволяет выбрать элемент, который является первым дочерним элементом в пределах своего родителя. Синтаксис CSS-селектора: active: Селектор CSS: first-child имеет базовую поддержку в следующих браузерах: Мы обсудим селектор: first-child ниже, исследуя примеры того, как использовать этот селектор в CSS для применения стиля к первому элементу. Давайте посмотрим на пример CSS: first-child, в котором мы применяем селектор: first-child к тегу . CSS будет выглядеть так: 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 будет выглядеть так: HTML будет выглядеть так: Результат будет выглядеть следующим образом (селектор: first-child будет стилизовать теги В этом примере CSS: first-child первая строка (т.е. первый тег Вместо использования двух разных селекторов для назначения стиля, а затем другого для его отмены.Используйте селектор: not, чтобы выбрать каждый элемент, кроме тех, которые соответствуют аргументу, который вы передали 👍 В текущем черновике, CSS-селекторы уровня 3, вы можете передать только простой селектор в качестве аргумента. Простые селекторы: Например, у них есть CSS-селекторов уровня 3 , CSS Grid Layout Level 1 и CSS Flexbox Level 1 . Селектор Рэйчел Эндрю написала фантастическую статью, объясняющую уровни CSS, я также связал ее в Раздел ресурсов, так что прочтите, если вам интересно 🤓 В текущей версии вы можете передавать только простые селекторы в качестве аргумента.Однако на уровне 4 селекторов CSS вы сможете передать список селекторов. Так здорово, верно 👏. И вот что будет выбрано Следует отметить, что отрицания могут не быть вложенными. Итак, это нет-нет: Давайте начнем с определения их индивидуально: Хорошо, давайте рассмотрим несколько примеров. Поскольку все дочерние типы одинаковы, результат будет одинаковым для обоих. НО , потому что Итак, вам может быть интересно, а что, если меня не волнует тип, я просто хочу выбрать первого дочернего элемента его родителя. В этом случае вы можете сделать это: И это понимание применимо к другим классам двоюродных братьев: Селектор Совместимость с браузером @hkfoster: Еще пара однострочников, которые тоже делают это: @vels_io: @ andr3: Это мощный инструмент, и, как и все остальное, следует использовать ответственно. В нашем примере вы можете обойтись простым: first-child — это псевдокласс в CSS, который представляет первый элемент среди группы родственных элементов.Селектор : first-child используется для определения стиля первого дочернего элемента его родителя. Синтаксис: Пример: 62 5 Псевдокласс CSS: first-of-type выбирает элемент, который является первым элементом своего типа в списке дочерних элементов своего родителя.Это то же самое, что: nth-of-type. Селектор: first-of-type на самом деле похож на: nth-child, но есть разница: он менее конкретен. Селектор: first-of-type нацелен на определенный тип элемента в расположении только по отношению к аналогичным братьям и сестрам. Начиная с уровня селекторов 4, от выбранного элемента не требуется наличие родителя. Селекторы уровня 3 Селекторы уровня 4 Пункт 1 Пункт 2 Пункт 3 Lorem Ipsum - это просто фиктивный текст для полиграфической и наборной индустрии. Lorem Ipsum - это просто фиктивный текст для полиграфической и наборной индустрии. . Lorem Ipsum - это просто фиктивный текст для полиграфической и наборной индустрии. . Это первый элемент! Эта вложенная 'em' первая ! Это вложенное «сильное» первое , но это вложенное «сильное» - последнее ! Этот вложенный "диапазон" получает стиль ! Это последний элемент.: nth-child (1 из p.special) означает, что мы выбираем первого дочернего элемента Взлом CSS по-прежнему весело
: first-of-class . С последней версией : nth-child () , возможно, нам даже не понадобится : first-of-class , мы просто ждем поддержки браузера.А пока последующий комбинатор-брат остается нашим другом. CSS: селектор первого ребенка
Описание
Синтаксис
элемент: first-child {style_properties} Параметры или аргументы
Примечание
Совместимость с браузером
Пример
С тегом
span: first-child {font-weight: bold; красный цвет; }
С тегом
р: первенец {цвет: синий; }
С тегом
.
tr: первенец {фон: желтый; }
<таблица>
Заголовок столбца 1
Заголовок столбца 2
techonthenet.com
Технический справочный сайт
checkyourmath.com
Сайт математических вычислений
bigactivities.com
Детский сайт
следующим образом): ) будет иметь желтый цвет фона. Все остальные строки в таблице не будут стилизованы селектором: first-child. CSS: не селектор | SamanthaMing.com
Разрешенные аргументы
CSS2ASplaining Кратко как
CSS2AS версии.У CSS тоже есть разные версии. Однако, в отличие от ECMAScript, где все находится в одной огромной категории (ES5, ES6, ES7), CSS работает по частям.
: not подпадает под спецификацию CSS Selectors Level 3. Следующее, над чем работает рабочая группа CSS, это … намек, что следует после 3 … ding ding, CSS Selectors Level 4 😜 Передача списка селекторов
Вложенные отрицания не разрешены 🙈
: первый ребенок vs : первый тип : первый ребенок выбирает только первый элемент, ЕСЛИ это первый ребенок своего родителя.Это означает, что если это не первый дочерний элемент родителя, ничего не будет выбрано.: first-of-type выберет первый элемент указанного вами типа. Даже если это не первый ребенок своего родителя. Таким образом, результат будет всегда, если вы используете этот селектор (если вы не выбрали элемент, которого вообще не существует). Все дочерние типы относятся к одному и тому же типу
Дети бывают разных типов
p уже не первый ребенок. Если вы позвоните по номеру p: first-child , НИЧЕГО не будет выбрано. Выбор первого ребенка
Другой аналогичный псевдокласс CSS
: последний ребенок и : последний тип : nth-child и : nth-of-type : only-child и only-of-type Поддержка браузера
: not поддерживается большинством современных браузеров и Internet Explorer 9 и выше. li: nth-of-type (n + 2) li ~ li li + li {...} Ресурсы
Что такое первый дочерний элемент в CSS?
: first-child {
//имущество
} HTML
< html > < стиль > p: первенец { фон: салатовый; цвет: белый; стиль шрифта: курсив; размер шрифта: 1.875em; } стиль > головка > 0003 < p > Я первый ребенок. p > < p > Я второй ребенок. p > < p > Я третий ребенок. p > < p> p> ребенок. p > body > html > CSS: Псевдо-класс первого типа - Изучение CSS
CSS: Псевдо-класс первого типа - Изучение CSS | W3Docs Версия¶
Синтаксис¶
: first-of-type {
объявления css;
} Пример селектора: first-of-type: ¶
Попробуйте сами »
: пример селектора первого типа
Пример селектора: first-of-type с тегом
: пример селектора первого типа
<статья>
Это заголовок.
Пример селектора: first-of-type с некоторыми тегами HTML: ¶
: пример селектора первого типа
<статья> Это элемент "q"!
