Псевдоклассы дочерних элементов. Дочерние селекторы в CSS Css выбрать первый дочерний элемент
Дочерние селекторы CSS - это селекторы, которые используются для применения стилей к элементам только в тех случаях, когда они являются дочерними по отношению к другим (родительским) элементам. Как и селекторы потомков, дочерние селекторы являются составными и складываются из простых селекторов (классы, идентификаторы и т.д.).
И снова, если вы забыли, что такое дочерние элементы, то давайте вспомним, разобрав уже знакомый вам пример.
<тег1> <тег2>...тег2> <тег3><тег4>...тег4>тег3> тег1>
Элемент называется дочерним по отношению к другому элементу, если он находится внутри него на первом уровне вложенности. В нашем примере <тег2> и <тег3> являются дочками <тег1> , а <тег4> - это дочка <тег3> .
Дочерние селекторы состоят из двух или более простых селекторов разделенных знаком "> ", где сначала указывается родитель, потом его дочерний элемент, затем дочка этого дочернего элемента и т.д. То есть, как и в селекторах потомков, задается путь прохождения по дереву документа. Стили будут применены только к тем элементам, селекторы которых находятся последними в списке. Общий синтаксис:
селектор1 > селектор2 {
Пробелы с обоих сторон знака "> " можно ставить, а можно и нет, по желанию.
Пример использования дочерних селекторов CSS
Параграф1.
Параграф2.
Результат в браузере
Параграф1.
Параграф2.
В этом примере вам надо обратить внимание на два момента. Здесь имеется три элемента , но только у двух из них есть рамки, отступы и поля. Почему? И второй момент. Только у первого параграфа синий цвет текста.
Internet Explorer 6.0 не понимает дочерние селекторы, поэтому, если вы создаете свой сайт с учетом этого старого браузера - помните об этом.
Дочерние селекторы в HTML-таблицах
Многие новички (а иногда уже и не новички) в создании сайтов сталкиваются с определенными проблемами при использовании дочерних селекторов в HTML-таблицах. Чтобы вы поняли, о чем идет речь, давайте посмотрим на такую обычную таблицу.
Ячейка 1.1 | Ячейка 1.2 |
Ячейка 2.1 | Ячейка 2.2 |
А теперь вопрос. Как вы поступите, если вам понадобится с помощью дочерних селекторов пройти от тега к ячейкам? Если вы решили написать вот так, то это неверно:
table > tr > td { свойство: значение; свойство: значение; ... }
А догадываетесь, почему неверно? Нет? Дело в том, что вы забыли еще про один элемент - , который даже если не указан явно, то все равно незримо присутствует в каждой HTML-таблице. Просто у него нет обязательных открывающих и закрывающих тегов, поэтому про него часто забывают. Кстати да, в HTML-учебнике мы его с вами не проходили, так как в реальности его явное указание редко когда нужно. Ну, думаю вы уже догадались, какая будет правильная запись, но я вам все же покажу.
table > tbody > tr > td { свойство: значение; свойство: значение; ... }
Кстати, не только таблицы имеют элементы с необязательными открывающими тегами, есть и еще такие элементы. Просто на практике «проблемы забывчивости» возникают чаще всего именно с таблицами, поэтому я и заострил ваше внимание на этом.
Домашнее задание.
- Установите на странице шрифт Arial с размером 0.9em и какой-нибудь фон.
- Напишите на странице несколько заголовков и параграфов, измените размер и цвет текста заголовков так, как посчитаете нужным.
- Сделайте так, чтобы ссылки непосредственно в параграфах страницы были синего цвета без подчеркивания. Но при этом, если ссылки дополнительно обрамляются любым тегом, например для курсива, то они должны отображаться уже с подчеркиванием и красного цвета. Еще раз заостряю ваше внимание на том, что не надо прописывать стили ссылок с каждым обрамляющим тегом в отдельности, сделайте универсально. Как? Подумайте.
- Создайте небольшое меню в правой части страницы и зафиксируйте его, для этого вам понадобится свойство и еще парочка сопутствующих ему свойств, там разберетесь. При этом, пусть меню не только остается на месте в пределах окна браузера, но и при скроллинге не наползает на содержимое страницы.
Думаю последний пункт урока будет для вас самым сложным, но не пытайтесь сразу полностью погрузиться в освоение позиционирования. Просто сделайте домашнее задание. Кстати, этот пункт не будет работать в Internet Explorer 6.0, так как старичек не понимает фиксированное позиционирование.
Вы дошли до третьей части этой главы. Здесь вы узнаете, как использовать селекторы дочерних элементов в 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 */ p:first-child { font-weight: bold; text-transform: uppercase; } p:last-child { font-style: italic; font-size: 0.8em; } p:nth-child(3) { color: red; } tr:nth-child(odd) { background-color: #A2DED0; } tr:nth-child(even) { background-color: #C8F7C5; } Скриншот: применение:first-child, :last-child и:nth-child
Мы написали CSS стиль для дочерних элементов простого HTML-документа, где тег
,
Samsung | Galaxy S7 Edge | 60000 |
Apple | iPhone SE | 39000 |
Microsoft | Lumia 650 | 13500 |
Alcatel | Idol S4 | 30000 |
Huawei | P9 | 60000 |
HTC | HTC 10 | 50000 |
Meizu | Pro 6 | 40000 |
Xiaomi | Mi5 | 35000 |
Чтобы определить стиль для нечетных элементов, в селектор передается значение "odd":
Tr:nth-child(odd){}
Для стилизации четных элементов в селектор передается значение "even":
Tr:nth-child(even){}
Также в этот селектор мы можем передать номер стилизуемого элемента:
Tr:nth-child(3) { background-color: #bbb; }
В данном случае стилизуется третья строка.
Еще одну возможность представляет использование заменителя для номера, который выражается буквой n :
Tr:nth-child(2n+1) { background-color: #bbb; }
Здесь стиль применяется к каждой второй нечетной строке.
Число перед n (в данном случае 2) представляет тот дочерний элемент, который будет выделен следующим. Число, которое идет после знака плюс, показывают, с какого элемента нужно начинать выделение, то есть, +1 означает, что нужно начинать с первого дочернего элемента.
Таким образом, в данном случае выделение начинается с 1-го элемента, а следующим выделяется 2 * 1 + 1 = 3-й элемент, далее 2 * 2 + 1 = 5-й элемент и так далее.
К примеру, если мы хотим выделить каждый третий элемент, начиная со второго, то мы могли бы написать:
Tr:nth-child(3n+2) { background-color: #bbb; }
Псевдокласс :nth-last-child по сути предоставляет ту же самую функциональность, только отсчет элементов идет не с начала, а с конца:
Tr:nth-last-child(2) { background-color: #bbb; /* 2 строка с конца, то есть предпоследняя */ } tr:nth-last-child(2n+1) { background-color: #eee; /* нечетные строки, начиная с конца */ }
Псевдокласс nth-of-type
Псевдокласс :nth-of-type позволяет выбрать дочерний элемент определенного типа по определенному номеру:
Tr:nth-of-type(2) { background-color: #bbb; }
Аналогично работает псевдокласс nth-last-of-type , только теперь отсчет элементов идет с конца:
Tr:nth-last-of-type(2n) { background-color: #bbb; }