Дочерние псевдоклассы – это селекторы, которые определяют состояние уже существующих дочерних элементов, которое может меняться при выборе тега.
Все материалы взяты с сайта https://indeling.ru
Каскадные таблицы стилей включают селектор, который работает во многом похоже на дочерний, рассмотренный в предыдущем разделе, но применяется к дочерним элементам с HTML-элементом определенного типа. Если вам нужно определенным образом отформатировать первый абзац на боковой панели, но только на тех страницах, где эта боковая панель начинается с элемента h2, и на других страницах, где она начинается с элемента p. Псевдоэлемент :first-child для выбора этого абзаца применять нельзя, потому что в некоторых случаях абзац является вторым дочерним элементом (который следует за h2). Тем не менее он всегда является первым абзацем (элементом p) на этой боковой панели, даже если перед ним идут какие-нибудь другие элементы, следовательно, его можно выбрать с помощью селектора тега :first-of-type.
Оригинал статьи по ссылке: https://indeling.ru/html-css/dochernie-psevdoklassy/
ПРИМЕЧАНИЕ
Псевдоклассы :last-child, :first-of-type и :nth-child() поддерживаются всеми современными браузерами, включая Internet Explorer 9 и выше. В Internet Explorer 8 они не работают.
Псевдокласс :first-of-type
Селектор работает так же, как и :first-child, но применяется к дочернему элементу, имеющему определенный элемент. Если у вас есть боковая панель с классом sidebar. Для форматирования первого абзаца этой боковой панели следует использовать следующий селектор:
.sidebar p:last-of-type
Обратите внимание на букву p в коде p:first-of-type. Она обозначает элемент, который вы собираетесь отформатировать.
Псевдокласс :last-of-type
Как было сказано ранее, селектор работает так же, как и :last-child, но применяется к последнему экземпляру элемента определенного типа. Если нужно на боковой панели div определенным образом отформатировать последний абзац, но вы не уверены, что за абзацем нет каких-либо других элементов (например, неупорядоченного списка, заголовка или рисунка). В таком случае стиль имеет следующий вид:
.sidebar p:last-of-type
ПРИМЕЧАНИЕ
Следует помнить, что указанные селекторы тегов также должны быть дочерними по отношению к конкретному элементу. Следовательно, код p:first-of-type означает «первый дочерний элемент, являющийся элементом абзаца».
Псевдокласс :nth-of-type
Псевдокласс работает так же, как и :nth-child(), но применяется к чередующимся дочерним элементам, имеющим определенный элемент. Следовательно, селектор может пригодиться при наличии больших абзацев текста, усеянных фотографиями. Элемент img является строчным, поэтому у вас может быть абзац p с несколькими изображениями img внутри. Если вам захочется чередовать появление изображений то слева, то справа, как показано на рис. 1.1, это можно сделать с помощью таких правил:
img:nth-of-type(odd) { float: left; }
img:nth-of-type(even) { float: right; }
Как видите, для :nth-of-type() используются такие же ключевые слова (odd или even) и формулы (например, 2n+1), как и для :nth-child().
Между прочим, :nth-of-type() можно также использовать для чередующихся строк таблицы (знак #- это решетка):
tr:nth-of-type(odd) { background-color: #D9F0FF; }
tr:nth-of-type(even) { background-color: #FFFFFF; }
Что касается CSS-селекторов, то здесь всегда имеется несколько способов добраться до HTML-элемента. В результате их набирается более пяти!
Придание спискам привлекательного внешнего вида с помощью дочерних псевдоклассов.
Когда нужно использовать дочерние псевдоклассы?
На самом деле существуют некоторые сложности дизайна веб-страниц. Так или иначе дочерние селекторы просто незаменимы и никакие другие не смогут с этим справиться. Такая ситуация встречается на большинстве сайтов. Тем не менее в любом маркированном списке присутствует несколько пунктов — элементов списка (см. рис. 1.2). Здесь можно использовать дочерние селекторы, что-бы визуально упорядочить данные в категориях (пунктах) и подкатегориях (подпунктах). Вы форматируете элементы первого уровня списка одним способом, а второго — другим. Содержимое, представленное таким способом, выглядит четко, профессионально и читабельно.
Дочерние псевдоклассы на практике?
Сначала создайте класс для самого верхнего — внешнего — уровня вложенности элементов списка и назовите его, скажем, .mainList. Для первого уровня вы можете использовать шрифт sans-serif, имеющий немного больший размер по сравнению с основным текстом веб-страницы, возможно, в другом цвете. Последующие категории могут быть представлены Times для лучшего восприятия. При большом объеме текста форматирование каждого уровня подкатегорий с небольшим отличием позволяет посетителям веб-страниц визуально ориентироваться в материале.
Вам нужно будет обратить внимание и на понятие наследования. Как правило, конкретные CSS-свойства, примененные к одному элементу, наследуются элементами, находящимися внутри него. Поэтому, если даже вы используете дочерний селектор, нацеленный на чей-либо дочерний элемент, свойства могут перейти на другие элементы внутри этого дочернего элемента. Один из способов избежать такого развития событий заключается в применении селектора :not().
Следующая статья в хронологическом порядке "Родственные селекторы". Ее Вы можете найти на сайте https://indeling.ru.
