Сайт о телевидении » Телефон » Css первый класса - Селектор CSS для первого элемента с классом. Где можно использовать на практике
Css первый класса - Селектор CSS для первого элемента с классом. Где можно использовать на практике
Вы дошли до третьей части этой главы. Здесь вы узнаете, как использовать селекторы дочерних элементов в CSS, а также познакомитесь с некоторыми дополнительными псевдоклассами для более точной выборки.
Дочерние селекторы CSS
В предыдущей статье мы рассказывали о родственных связях между элементами HTML-документа, в том числе и о дочерних элементах. Давайте посмотрим на примере, как эти связи можно использовать в CSS.
Представьте, что вам нужно присвоить стиль только тем тегам
Которые являются дочерними по отношению к
, не затрагивая остальные
(например,
Дочерние по отношению к
).
Как это сделать? Очень просто: создадим дочерний селектор:
Body > p {
color: #333;
}
Обратите внимание на символ > после body . С помощью него вы указываете, что стиль применяется исключительно для дочерних тегов
Родителя
. Если символ убрать, то стиль применится абсолютно ко всем тегам
Которые находятся внутри тега
, хотя они могут и не являться для него дочерними.
Дополнительные псевдоклассы
В CSS3 существует ряд псевдоклассов для работы с дочерними элементами. Ниже приведено описание каждого из них, примеры использования, а также отличия между псевдоклассами вида «child» и «of-type».
:first-child – с помощью этого псевдокласса можно применить стиль к указанному элементу веб-страницы, при условии, что он является первым
:last-child – стиль применяется к указанному элементу веб-страницы при условии, что он является последним
дочерним элементом своего родителя;
:nth-child – позволяет выбрать четные (even) и нечетные (odd) дочерние элементы; также с помощью данного псевдокласса можно стилизовать чередующиеся дочерние элементы, используя выражения вида an+b и числа;
:only-child – применяется к дочернему элементу при условии, что тот является единственным
ребенком у родителя;
:first-of-type – стиль применяется к первому элементу указанного типа
(даже если этот элемент не является первым дочерним для своего родителя и над ним находятся другие дочерние элементы других типов);
:last-of-type – работает точно так же, как и предыдущий псевдокласс, с той лишь разницей, что стиль применяется к последнему элементу указанного типа
;
:nth-of-type – по принципу работы похож на:nth-child , но ориентируется на тип
элемента;
:only-of-type – применяется к дочернему элементу указанного типа при условии, что тот является у родителя единственным ребенком своего типа
.
Пример использования:first-child, :last-child и:nth-child
Мы написали CSS стиль для дочерних элементов простого HTML-документа, где тег
является родителем для тегов
,
. Разберем CSS по порядку.
Первое правило – p:first-child – касается элемента p: если он является первым дочерним элементом своего родителя
, то к нему применяется стиль (в нашем случае это жирный шрифт и преобразование текста в верхний регистр). Если в данный HTML-код сразу после открывающего тега
добавить еще какой-нибудь тег (к примеру,
), то стиль p:first-child уже не будет отображаться, поскольку
Перестанет быть первым дочерним тегом. В данном случае первым дочерним элементом будет h2 .
Всё то же самое происходит и с правилом p:last-child – стиль CSS будет применен к тегу
Лишь тогда, когда он будет являться последним дочерним элементом своего родителя
. Добавьте после
Любой другой тег отличного типа и вы увидите, что правило p:last-child перестанет применяться.
Правило p:nth-child(3) работает для третьего
дочернего тега
(об этом свидетельствует число 3 в скобках). Цвет шрифта для этого абзаца становится красным. Вы можете изменить число 3 (например, на 2) и посмотреть результат.
Правила tr:nth-child(odd) и tr:nth-child(even) работают для нечётных и чётных элементов tr соответственно. Вы можете увидеть результат на скриншоте, а также скопировать весь код и поэкспериментировать со стилями самостоятельно.
Пример использования:first-of-type, :last-of-type, :nth-of-type и:only-of-type
Первое правило CSS, которое вы видите – это p:first-of-type . Что оно делает? Оно выбирает дочерний элемент типа p , который первым
встречается у родителя. И не важно, на каком месте среди элементов других типов находится данный тег – на первом, втором или десятом. В этом и заключается отличие между псевдоклассами:first-child и:first-of-type .
Второе правило – p:last-of-type – применяет стиль к последнему
дочернему элементу типа p . Как видно из HTML-кода, после последнего тега
Есть еще и тег
, присутствие которого никак не влияет на выполнение CSS-правила (в отличие от варианта с:last-of-child).
Следующее правило – p:nth-of-type(3) – изменяет цвет шрифта на красный. Применяется этот стиль к тегу
Который является третьим
по счету элементом своего типа у родителя. На скриншоте вы видите, что красный цвет применяется к тегу
Который по факту является пятым ребенком тега
. Но если не брать во внимание элементы других типов, то получается, что тег
С красным шрифтом находится на третьем месте (среди тегов своего типа). Таким образом работает данное правило.
Правила p:nth-of-type(even) и p:nth-of-type(odd) работают аналогично: поскольку перед двоеточием указано имя p , то выбираются четные и нечетные дочерние элементы типа p и окрашиваются в заданные цвета. Остальные элементы пропускаются.
Последнее правило – h3:only-of-type – применяется к содержимому тега
, делая текст подчеркнутым. Данный стиль работает лишь потому, что тег
является единственным
дочерним элементом своего типа. Если в HTML-код добавить еще один тег
, стиль не будет применён.
Выводы
Дочерний селектор CSS позволяет изменить стиль дочернего элемента HTML-документа, исходя из того, кто является его родителем.
С помощью дополнительных псевдоклассов:first-child, :last-child, :nth-child, :only-child можно стилизовать дочерние элементы HTML-документа, ориентируясь на их местоположение, нумерацию в дереве элементов.
Псевдоклассы:first-of-type, :last-of-type, :nth-of-type, :only-of-type позволяют применять стиль к дочерним элементам HTML-документа, ориентируясь на их тип, а также на нумерацию в дереве элементов.
Хотел бы сегодня написать на тему, как выбрать в css первый элемент родителя, потому что это позволяет использовать меньше стилевых классов.
Псевдоклассы:first-child и first-of-type в чем разница?
Для того, чтобы в css обратиться к первому элементу из родительского контейнера, были придуманы два псевдокласса. Я сразу же предлагаю рассмотреть все на примере, чтобы вы поняли:
Это абзац
Это абзац
Это абзац
Это абзац
Это абзац
Допустим, имеем такую разметку. Цель – обратиться к первому абзацу и стилизовать его отдельно от других без дописывания ему классов. Это можно сделать так:
#wrapper p:first-child{
сolor: red;
}
Цвет первого абзаца станет красным, можете проверить.
#wrapper p:first-of-type{
color: red;
}
Произойдет то же самое. Так в чем же разница? А она заключается в том, что псевдокласс first-of-type ищет и находит первый элемент родителя, учитывая его тип, а first-child ничего не ищет – он просто берет первый попавшийся элемент родителя и если это абзац, то применяет к нему стили. Если нет, то ничего не выберется и не применится.
Это абзац
Это абзац
Это абзац
Это абзац
Это абзац
А теперь подумайте: сработает ли в этом случае first-of-type ? Да, потому что он учитывает тип элемента и выберет именно первый абзац, а не первый из вообще всех элементов. А first-child сработает? Попробуйте. Ничего не получится, потому что абзац не стоит первым элементом в родителе.
Лично я не сразу понял разницу между этими псевдоклассами и какое-то время путался, но сейчас, я надеюсь, нормально вам объяснил.
Еще важная деталь
Отсчет элементов идет именно от родительского элемента, поэтому если вы указали так:
Li:first-of-type{
…
}
То выбран будет первый пункт списков в теге body (то есть на всей странице). Таким образом, в любом списке первый пункт будет оформляться по-другому. Если же написать так:
#sidebar li:first-of-type{
…
}
То выбраны будут только первые пункты списков в сайдбаре, то есть боковой колонке на нашем сайте.
Используя различные селекторы, о которых я написал , вы можете дотянуться практически до любого элемента на веб-странице.
Кстати, я забыл упомянуть о противоположных псевдоклассах – last-child (и last-of-type соответственно). Они позволяют выбрать последний элемент из родительского контейнера.
Где можно использовать на практике
Говорится об этих псевдоклассах потому, что они активно используются при верстке с помощью css. Вот есть у вас на странице, например, блок похожих записей, или комментариев, или еще чего. И у вас возникла идея как-то по особенному оформить его первый элемент. А может, последний. Да и вообще любой можно.
Вам всего лишь нужно узнать название блока, в котором хранится нужный элемент. Допустим, имеем дело с популярными записями. Родительский контейнер имеет класс popular. Тогда пишем так:
Popular li:first-of-type{
padding-top: 20px;
}
Все, первый пункт списка в нем получил отступ сверху, а можно дописать в стили все, что вам захочется. Вот еще такой пример. У меня в теге body всего три одинаковых серых блока.
Первый блок получил наклон вправо, а последний – влево. И это лишь примеры того, где и как могут применяться наши псевдоклассы.
Это один из самых известных примеров непонимания авторов:first-child как работает:first-child . Введенный в CSS2 :first-child псевдо-класс:first-child представляет собой самый первый дочерний элемент его родителя
. Вот и все. Существует очень распространенное заблуждение, что он выбирает, какой дочерний элемент является первым, чтобы соответствовать условиям, указанным остальным составным селектором. Из-за того, как работают селекторы (см. объяснение), это просто неверно.
Стоит отметить, что Selectors 4 представляет расширение для:nth-child() нотации (первоначально полностью новый псевдокласс класса:nth-match()), который позволит вам использовать что-то вроде:nth-child(1 of .red) вместо гипотетического.red:first-of-class . Будучи относительно недавним предложением, недостаточно совместимых реализаций для его использования на производственных площадках. Надеюсь, это скоро изменится. Тем временем обходной путь, который я предложил, должен работать в большинстве случаев.
Имейте в виду, что этот ответ предполагает, что вопрос ищет каждый первый дочерний элемент, который имеет данный класс. Для n-го совпадения сложного селектора по всему документу
нет ни псевдо-класса, ни даже общего решения CSS, независимо от того, существует ли решение, в значительной степени зависит от структуры документа. jQuery предоставляет:eq() :first:last и more для этой цели, но обратите внимание, что они работают по-разному:nth-child() et al . Используя API Selectors, вы можете использовать document.querySelector() для получения первого совпадения:
Var first = document.querySelector(".home > .red");
Или используйте document.querySelectorAll() с индексом, чтобы выбрать любое конкретное соответствие:
Var redElements = document.querySelectorAll(".home > .red");
var first = redElements;
var second = redElements;
// etc
Хотя решение.red:nth-of-type(1) в оригинальном принятом ответе Филиппа Дабмайера работает (которое первоначально было написано Martyn но удалено с тех пор), оно не ведет себя так, как вы ожидали.
Например, если вы только хотели выбрать p в исходной разметке:
Тогда вы не можете использовать.red:first-of-type (эквивалентно.red:nth-of-type(1)), потому что каждый элемент является первым (и единственным) одним из его типов (p и div соответственно), поэтому оба
будут соответствовать селектору.
Когда первый элемент определенного класса также является первым его типом
, псевдокласс будет работать, но это происходит только по совпадению
. Такое поведение продемонстрировано в ответе Филиппа. В тот момент, когда вы вставите элемент того же типа перед этим элементом, селектор завершится с ошибкой. Принимая обновленную разметку:
blah
second
fourth
Применение правила с.red:first-of-type будет работать, но как только вы добавите еще один p без класса:
blah
second
fourth
Селектор немедленно выйдет из строя, потому что первый.red элемент теперь является вторым
элементом p .
Псевдокласс :first-of-type
задаёт стиль первого элемента определённого типа в группе братских элементов (имеющих одного родителя).
Скриншот: применение:first-of-type, :last-of-type, :nth-of-type и:only-of-type
