Я приветствую вас на своем блоге. Хотел бы сегодня написать на тему, как выбрать в css первый элемент родителя, потому что это позволяет использовать меньше стилевых классов.
Псевдоклассы :first-child и first-of-type в чем разница?
Для того, чтобы в css обратиться к первому элементу из родительского контейнера, были придуманы два псевдокласса. Я сразу же предлагаю рассмотреть все на примере, чтобы вы поняли:
<div id = "wrapper">
<p>Это абзац</p>
<p>Это абзац</p>
<p>Это абзац</p>
<p>Это абзац</p>
<p>Это абзац</p>
</div>
Допустим, имеем такую разметку. Цель – обратиться к первому абзацу и стилизовать его отдельно от других без дописывания ему классов. Это можно сделать так:
#wrapper p:first-child{
Color: red;
}
Цвет первого абзаца станет красным, можете проверить.
#wrapper p:first-of-type{
color: red;
}
Произойдет то же самое. Так в чем же разница? А она заключается в том, что псевдокласс first-of-type ищет и находит первый элемент родителя, учитывая его тип, а first-child ничего не ищет – он просто берет первый попавшийся элемент родителя и если это абзац, то применяет к нему стили. Если нет, то ничего не выберется и не применится.
Давайте представим, что в разметку мы добавили перед абзацами еще какой-нибудь тег, например, картинку.
<div id = "wrapper">
<img>
<p>Это абзац</p>
<p>Это абзац</p>
<p>Это абзац</p>
<p>Это абзац</p>
<p>Это абзац</p>
</div>
А теперь подумайте: сработает ли в этом случае first-of-type? Да, потому что он учитывает тип элемента и выберет именно первый абзац, а не первый из вообще всех элементов. А first-child сработает? Попробуйте. Ничего не получится, потому что абзац не стоит первым элементом в родителе.
Лично я не сразу понял разницу между этими псевдоклассами и какое-то время путался, но сейчас, я надеюсь, нормально вам объяснил.
Еще важная деталь
Отсчет элементов идет именно от родительского элемента, поэтому если вы указали так:
Li:first-of-type{
…
}
То выбран будет первые пункты списков в теге body (то есть на всей странице). Таким образом, в любом списке первый пункт будет оформляться по-другому.
Если же написать так:
#sidebar li:first-of-type{
…
}
То выбраны будут только первые пункты списков в сайдбаре, то есть боковой колонке на нашем сайте.
Используя различные селекторы, о которых я написал здесь, вы можете дотянуться практически до любого элемента на веб-странице. В этой статье вы можете подробнее прочитать о том, как работать с псевдоклассом nth-child в css и он дает возможности в плане выбора элементов.
Кстати, я забыл упомянуть о противоположных псевдоклассах – last-child (и last-of-type соответственно). Они позволяют выбрать последний элемент из родительского контейнера.
Где вы можете использовать на практике
Я пишу об этих псевдоклассах потому, что они активно используются при верстке с помощью css. Вот есть у вас на странице, например, блок похожих записей, или комментариев, или еще чего. И у вас возникла идея как-то по особенному оформить его первый элемент. А может, последний. Да и вообще любой можно.
Вам всего лишь нужно узнать название блока, в котором хранится нужный элемент. Допустим, имеем дело с популярными записями. Родительский контейнер имеет класс popular. Тогда пишем так:
.popular li:first-of-type{
Padding-top: 20px;
}
Все, первый пункт списка в нем получил отступ сверху, а можно дописать в стили все, что вам захочется.
Вот еще такой пример. У меня в теге body всего три одинаковых серых блока. Напишем так:
div:first-of-type{
transform: rotate(7deg);
}
div:last-of-type{
transform: rotate(-7deg);
}
Первый блок получил наклон вправо, а последний – влево.
И это лишь примеры того, где и как могут применяться наши псевдоклассы.
Итог
Вот такая у меня получилась сегодня статья. Важно понять саму суть выбора элементов, и вы сможете без проблем использовать эти приемы в своей работе.