Как обратиться к первому дочернему элементу css
Перейти к содержимому

Как обратиться к первому дочернему элементу css

  • автор:

Как обратиться к первому элементу css

Обратиться к первому элементу внутри родителя можно с помощью псевдокласса :first-child .

Например, мы хотим поменять цвет шрифта у первого параграфа:

  Параграф 1 Параграф 2 Параграф 3  
div p:first-child  color: red; > 

Цвет у первого параграфа поменяется на красный.

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

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

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

 

Роль цитокинов при дорсалгии

Автор: Гордон Фримен, канд. физ.-мат. наук

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

Почта: freemen@blackmesa.com

Опубликовано:

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

article :first-child

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

article h1:first-child

Если вместо h1 использовать другой селектор, то ничего выбрано не будет, поскольку не выполняется условие «первый элемент это

».

article p:first-child

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

Пример

first-child

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.

Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

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

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

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

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

Ссылки с линией слева

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

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

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

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

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

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

Браузеры

7 12 4 9.5 4 3

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

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

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

См. также

  • :first-child и :last-child
  • :first-of-type и :last-of-type
  • Псевдокласс :first-of-type
  • Псевдокласс :last-child
  • Псевдоклассы в CSS

Как обращаться к дочернему элементу в css?

Если вы укажете div p , то стиль будет применен ко всем p внутри div , независимо от степени вложенности.

div p
 

Просто текст

Еще текст

Опять текст

Тут что-то написано

И тут что-то написано

А если укажете div>p , то стиль будет применен, только к «прямым» дочерним элементам «первой степени вложенности», обратите внимание, тут для p , который внутри section стиль не применился, хотя он тоже внутри div , но он вложен еще в другой элемент

div>p
 

Просто текст

Еще текст

Опять текст

Тут что-то написано

И тут что-то написано

CSS-селекторы. Шпаргалка для новичков

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

�� Сегодня вам бесплатно доступен тренажёр по HTML и CSS.

Основные селекторы

Селекторы типа выбирают элементы HTML-документа по их тегу. Например, селектор p выберет все

на странице:

 

Текст

Другой текст

Селекторы класса определяют стиль элементов с определённым классом. Например, этот селектор выберет абзац с классом .highlight .

 

Текст

Другой текст

.highlight

Селекторы идентификатора выбирают элемент по его уникальному идентификатору. Например, #welcome соответствует элементу с id=»welcome» :

 

Добро пожаловать!

#welcome

Селекторы наличия и значения атрибута находят все элементы, которые имеют определённый атрибут или значение атрибута. Например, здесь мы выбираем все ссылки, которые начинаются на http:// , но не имеют example.com .

a[href^="http://"]:not([href*="[example.com](http://example.com/)"])

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

*, *::before, *::after

Селекторы-комбинаторы

Комбинаторы выбирают элементы, основываясь на их взаимосвязи в дереве DOM. Можно выбрать элементы, которые являются потомками, соседями или родителями других элементов.

Пример DOM-дерева. Здесь html — родитель для head и body. В свою очередь head — родитель для meta и title, а body — для header и main

Соседний родственный комбинатор

Записывается как селектор1 + селектор2 . Выбирает элемент, подходящий под селектор2 , перед которым расположен элемент, подходящий под селектор1 .

 

Сегодня я стал великим фронтендером.

Я написал стили для текста.

.first + .second

Селектор .first + .second применит стили к абзацу с классом .second , потому что перед ним есть элемент с классом .first . Предложение «Я написал стили для текста.» станет белым.

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

Записывается как селектор1 > селектор2 . Выбирает элементы, которые являются прямыми потомками элемента, подходящего под селектор1 .

 

Я выучил CSS

Ну селекторы точно знаю.

.decoration > p

Стили применятся только к «Я выучил CSS», этот текст станет красным.

Общий родственный комбинатор

Записывается как селектор1 ~ селектор2 . Добавляет стили для элемента, который соответствует селектор2 , если перед ним стоит элемент, подходящий под селектор1. Оба элемента должны принадлежать одному родителю.

 

Это было прекрасное раннее утро. Идеальное время, чтобы приготовить чашку кофе или чая, открыть ноутбук и выучить CSS.

Так Вовка и поступил. Погладил кота, набрался решимости и открыл для себя новый мир вёрстки.

p ~ p

Стили применятся ко второму параграфу, появится внешний отступ сверху.

Этот селектор отличается от соседнего селектора тем, что между элементами селектор1 и селектор2 могут находиться другие элементы.

Комбинатор потомка

Записывается как селектор1 селектор2 . Находит все потомки элемента, который подходит под селектор1 , и применяет к ним стили.

Оказалось, что селекторы — это не так страшно, как я думал. Нужно только немного попрактиковаться, и всё сразу станет ясно.

p span

Здесь в синий цвет окрасятся «не так страшно» и «всё сразу станет ясно.».

Селекторы псевдоклассов

Псевдоклассы — это простые селекторы, позволяющие выбирать элементы на основе информации, которая находится за пределами DOM-дерева или которую невозможно выразить с помощью простого селектора.

�� Простой селектор — это селектор по одному условию, односоставной.

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

Чтобы использовать псевдокласс, нужно добавить его в селектор, например:

a:active

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

:hover

Псевдокласс :hover соответствует элементу, когда пользователь наводит на него курсор мыши. Например, здесь псевдокласс используется, чтобы убрать подчёркивание ссылки:

a:hover

:active

Псевдокласс :active соответствует элементу, на который активно нажимают. Здесь псевдокласс используется для скругления рамок кнопки, когда на неё кликают:

button:active

:visited

Псевдокласс :visited соответствует посещённой ссылке. Например, с его помощью мы можем поменять цвет ссылки, по которой перешёл пользователь:

a:visited

:focus

Псевдокласс :focus соответствует элементу, находящемуся в фокусе — то есть когда элемент выбран для ввода или навигации с помощью клавиатуры. Например, здесь :focus используется для добавления зелёной рамки вокруг поля ввода:

input:focus

:first-child , :last-child и :nth-child(n)

Эти псевдоклассы выбирают элемент по его порядковому номеру. :first-child соответствует первому дочернему элементу родителя, :last-child — последнему. А псевдокласс :nth-child(n) указывает на n -й дочерний элемент. Например, с его помощью можно выбрать второй, пятый или предпоследний элемент. Вместо n в скобках указывается целое число или математическое выражение.

/* выберет первый элемент — HTML*/ li:first-child < font-weight: 700; >/* выберет последний элемент — JavaScript*/ li:last-child < text-decoration: underline; >/* выберет второй элемент — CSS*/ li:nth-child(2)

:first-of-type , :last-of-type и :nth-of-type(n)

Эти псевдоклассы похожи на предыдущие. Они тоже выбирают элемент по его порядковому номеру, но только с учётом типа — тега.

 

Первый параграф

Второй параграф

Выделенный текст

Третий параграф

Четвёртый параграф

Пятый параграф

Выделенный текст
/*Текст в первом теге 

будет жирным*/ p:first-of-type < font-weight: 700; >/*Текст во втором теге

будет подчёркнут*/ p:nth-of-type(2) < color: green; >/*Текст в последнем теге

будет подчёркнут*/ p:last-of-type

«Первый параграф» и «Третий параграф» станут жирными. «Второй параграф и «Четвёртый параграф» окрасятся в зелёный. «Четвёртый параграф» и «Пятый параграф» будут подчёркнутыми.

Если мы используем здесь first-child , nth-child(2) и last-child , то получим другую картину. Жирным станет только «Первый параграф». В зелёный окрасятся «Второй параграф» и «Третий параграф». Подчёркнутым будет «Четвёртый параграф». И всё это из-за того, что между

есть другие элементы — .

Слева стилизуем текст с помощью селекторов *-of-type, справа — *-child

:empty

Псевдокласс :empty — это селектор CSS, который соответствует элементам, не имеющим дочерних элементов, включая текстовые узлы и другие элементы. Его можно использовать для стилизации элементов, которые пусты или не имеют содержимого:

input:empty < border: 1px solid red; >> 

В этом примере мы с помощью :empty добавляем красную рамку пустому инпуту.

Заключение

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

Ещё статьи про CSS

  • Как посчитать специфичность селекторов
  • Как работает каскад в CSS
  • Флексы для начинающих
  • Как создавать адаптивные сетки

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

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

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