Css первый и последний элемент. CSS3 - новые псевдоклассы
Псевдокласс :nth-last-child используется для добавления стиля к элементам на основе нумерации в дереве элементов. В отличие от псевдокласса :nth-child отсчёт ведётся не от первого элемента, а от последнего.
Обозначения
Описание | Пример | |
---|---|---|
<тип> | Указывает тип значения. | <размер> |
A && B | Значения должны выводиться в указанном порядке. | <размер> && <цвет> |
A | B | Указывает, что надо выбрать только одно значение из предложенных (A или B). | normal | small-caps |
A || B | Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. | width || count |
Группирует значения. | [ crop || cross ] | |
* | Повторять ноль или больше раз. | [,<время>]* |
+ | Повторять один или больше раз. | <число>+ |
? | Указанный тип, слово или группа не является обязательным. | inset? |
{A, B} | Повторять не менее A, но не более B раз. | <радиус>{1,4} |
# | Повторять один или больше раз через запятую. | <время># |
Значения
odd Все нечётные номера элементов, начиная с конца. even Все чётные номера элементов, начиная с конца. <число> Порядковый номер дочернего элемента относительно своего родителя. Нумерация начинается с 1, это соответствует последнему элементу в списке. <выражение> Задаётся в виде an±b , где a и b целые числа, а n - счётчик, который автоматически принимает значение 0, 1, 2...
Если a равно нулю, то оно не пишется и запись сокращается до b . Если b равно нулю, то оно также не указывается и выражение записывается в форме an . a и b могут быть отрицательными числами, в этом случае знак плюс меняется на минус, например: 5n-1.
За счёт использования отрицательных значений a и b некоторые результаты могут также получиться отрицательными или равными нулю. Однако на элементы оказывают влияние только положительные значения из-за того, что нумерация элементов начинается с 1.
В табл. 1 приведены некоторые возможные выражения и ключевые слова, а также указано, какие номера элементов будут задействованы. Отсчёт ведётся от последнего элемента.
Значение | Номера элементов | Описание |
---|---|---|
1 | 1 | Последний элемент, является синонимом псевдокласса :last-child . |
5 | 5 | Пятый элемент с конца. |
2n | 2, 4, 6, 8, 10,… | Все чётные элементы, начиная с конца; аналог значения even . |
2n+1 | 1, 3, 5, 7, 9,… | Все нечётные элементы, начиная с конца; аналог значения odd . |
3n | 3, 6, 9, 12,… | Каждый третий элемент, начиная с конца. |
3n+2 | 2, 5, 8, 11, 14,… | Каждый третий элемент, начиная с предпоследнего. |
n+4 | 4, 5, 6, 7, 8,… | Все элементы, кроме последних трёх. |
-n+3 | 3, 2, 1 | Последние три элемента. |
5n-2 | 3, 8, 13, 18, 23,… | — |
even | 2, 4, 6, 8, 10,… | Все чётные элементы, начиная с конца. |
odd | 1, 3, 5, 7, 9,… | Все нечётные элементы, начиная с конца. |
Пример
2134 | 2135 | 2136 | 2137 | 2138 | |
Нефть | 16 | 34 | 62 | 74 | 57 |
Золото | 4 | 69 | 72 | 56 | 47 |
Дерево | 7 | 73 | 79 | 34 | 86 |
Камни | 23 | 34 | 88 | 53 | 103 |
В данном примере псевдокласс :nth-last-child используется для выделения цветом всех нечётных колонок, начиная с последней (рис. 1).
Рис. 1. Применение псевдокласса:nth-last-child к колонкам таблицы
Спецификация
Каждая спецификация проходит несколько стадий одобрения.
- Recommendation (Рекомендация ) - спецификация одобрена W3C и рекомендована как стандарт.
- Candidate Recommendation (Возможная рекомендация ) - группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
- Proposed Recommendation (Предлагаемая рекомендация ) - на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
- Working Draft (Рабочий проект ) - более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
- Editor"s draft (Редакторский черновик ) - черновая версия стандарта после внесения правок редакторами проекта.
- Draft (Черновик спецификации ) - первая черновая версия стандарта.
- Перевод
Вам когда-нибудь хотелось прямо в CSS коде посчитать, в меню 4 элемента или 10? Для четырех задать им ширину по 25%, а если набралось десять - прижать их друг к другу и уменьшить отступы?
Как выяснилось, CSS умеет работать с разным количеством элементов, позволяя избавиться от головных болей и лишнего кода на js.
/* "больше-чем-один" будут иметь уменьшенный размер шрифта */
button {
font-size: 2em;
}
button:not(:only-of-type) {
font-size: 1.25em;
}
N элементов
Применять стили, основываясь на «больше-чем-один» и «меньше-чем-два» это ловкий трюк, но нам нужен более гибкий инструмент, позволяющий оперировать с любым числом. Мы хотим использовать селекты “больше или равно N” для любого N. Кроме этого, хочется иметь селект «ровно 745» или «суммарно ровно 6».Для этого у нас есть селектор :nth-last-child(n) , в который мы параметром передаем любое число. Он позволяет отсчитать столько-то элементов назад от конца списка. Например, :nth-last-child(6) выберет элемент, который является шестым с конца среди своих соседних элементов.
Всё становится интереснее, когда мы совмещаем:nth-last-child(6) и:first-child, в результате получая все элементы, которые являются шестыми с конца и при этом первыми с начала.
Li:nth-last-child(6):first-child {
/* зеленый кальмар */
}
Если такой элемент существует, это будет значить, что у нас ровно 6 элементов. Таким образом, я написал CSS код, который может сказать, сколько элементов я вижу перед собой.
Осталось теперь воспользоваться этим одновременно «шестым с конца и первым с начала» элементом, чтобы еще и поселектать все остальные 5 элементов. Для этого я воспользуюсь общим соседним комбинатором .
Если вы не знакомы с этим комбинатором, то объясняю, ~ li в селекте li:nth-last-child(6):first-child ~ li значит «любой li, который идёт после li:nth-last-child(6):first-child». В нашем случае, элементы будут иметь зеленый цвет шрифта, если их ровно 6 штук.
Li:nth-last-child(6):first-child, li:nth-last-child(6):first-child ~ li { color: green; }
Больше или равно 6
Селектать фиксированное количество, будь то 6, 19 или 653 - не очень-то полезно, так как подобная необходимость очень редка. Это как в media queries - не очень удобно использовать фиксрованную ширину вместо min-width или max-width: @media screen and (width: 500px) {
/* стили для ширины вьюпорта ровно в 500px */
}
В навигационном меню я хочу переключать стили с границей, основанной на количестве элементов, например, поменять нужные стили, если у меня 6 и больше элементов (а не ровно шесть).
Вопрос в том, как сделать такой селектор? и это вопрос смещений.
Параметр n+6
Селектор:nth-child() может принимать параметром не только число, но и формулу “n + [число]”. Например, :nth-child(n+6) будет применён ко всем элементам, начиная с шестого.
Хоть этот селектор и является мощным инструментом сам по себе, он не позволяет оперировать с количеством. Он применится не тогда, когда у нас больше шести элементов, а просто к элементам, у которых номер больше пяти.
Чтобы обойти эту проблему, нам нужно создать такой селект, который выделит все элементы, кроме последних пяти. Используя обратный к:nth-child(n+6) селект:nth-last-child(n+6) мы сможем выделить все элементы «от с шестого с конца и до самого первого с начала».
Li:nth-last-child(n+6) {
/* здесь стили */
}
Такой селект отсекает последние пять элементов от набора любой длины, что означает, что если у вас меньше шести элементов, то в селект ничего и не попадет.
Если же в списке шесть или больше элементов, нам остаётся прибавить к селекту оставшиеся пять элементов. Это легко - если элементов больше шести, то срабатывает условие nth-last-child(n+6), и комбинируя его с "~" мы сможем поселектать все нужные нам элементы.
Такая вот короткая запись и является решением нашей проблемы:
Li:nth-last-child(n+6),
li:nth-last-child(n+6) ~ li {
/* здесь стили */
}
Разумеется, тут может быть любое положительное целое число, даже 653,279.
Меньше или N
Как и в предыдущем примере с:only-of-type, селектор можно использовать в обе стороны, и как «больше или равно N» и как «меньше или равно N». Какой вариант вы будете использовать? Зависит от того, какую сетку вы будете считать основной.В случае «Меньше или N» мы берем n с минусом и добавляем условие:first-child.
Li:nth-last-child(-n+6):first-child,
li:nth-last-child(-n+6):first-child ~ li {
/* здесь стили */
}
В результате, использование "-" меняет направление селекта: вместо того, чтобы считать от начала и до шести, отсчёт будет идти от конца до шести. В обоих случаях, шестой элемент будет включён в селект.
nth-child против nth-of-type
Заметьте, что в предыдущих примерах я использовал:nth-child() и:nth-last-child(), а не:nth-of-type() с:nth-last-of-type(). Так как я селектал теги- могут быть только они, :last-child() и:last-of-type() оказываются одинаково результативны.
- odd - нечетные элементы;
- even - четные.
Обе группы селектов:nth-child() и:nth-of-type() имеют свои преимущества, исходя из того, чего вы хотите добиться. Так как:nth-child() не привязан к конкретному тегу, описанную выше технику можно применять к смешанным дочерним элементам:
Container > :nth-last-child(n+3),
.container > :nth-last-child(n+3) ~ * {
/* здесь стили */
}
(Обратите внимание, чтобы не привязываться к тегам, я использую универсальный селектор . :last-child(n+3) ~ *. В этом случае, он обозначает «любой элемент любого тега, следующий за:last-child(n+3).»
С другой стороны, преимущество:nth-last-of-type() в том, что вы можете селектать элементы с одним тегом среди множества других соседних. Например, можно посчитать количество тегов
Несмотря на то, что они в одной куче с
.
...P:nth-last-of-type(n+6), p:nth-last-of-type(n+6) ~ p { /* здесь стили */ }
Поддержка браузерами
Все используемые в статье селекторы CSS2.1 и CSS3 поддерживаются в Internet Explorer 9 и выше , а так же все современные мобильные и десктопные браузеры.
Internet Explorer 8 неплохо поддерживает большинство селектов, но задуматься о полифилле на js не помешает. В качестве альтернативы, можно расставить специальные классы для старых версий IE и приписать их к своим селекторам. В случае с навигационным меню, код будет выглядеть примерно так:
Nav li:nth-last-child(n+6), nav li:nth-last-child(n+6) ~ li, .lt-ie9 nav li { display: inline-block; /* и т.д. */ }
В реальном мире
Предположим, наше навигационное меню принадлежит сайту с CMS. В зависимости от того, кто его наполняет и использует, в меню будет разное количество элементов. Кто-то старается не усложнять и ему хватает «Home» и «About», а кто-то хочет запихать в меню всё, что есть у него на сайте.
Создавая стили, учитывающие разные сетки для разного количества элементов в меню, мы делаем вёрстку более стройной и подходящей для самых разных форматов - какой бы ни был контент, у нас всё учтено.
Поздравляю, теперь в вашем CSS арсенале есть умение оперировать количеством элементов.
Контент-независимый дизайн
Респонсив дизайн решает одну важную проблему: он позволяет комфортно расположить один и тот же контент на множестве разных устройств. Было бы неприемлемо видеть разный контент только потому, что у тебя экран неправильного размера. Так же и неприемлемо диктовать дизайнеру, под сколько пунктов меню должен быть заточен сайт. «Не рисуй так, у нас вся сетка поедет, если будет столько элементов».Какую форму примет контент и сколько его будет в конкретный момент времени - никто не знает. И мы не можем всегда полагаться на скрипты или обрезание текста, это неправильно. Правильно - быть независимым от количества контента и создавать для этого нужные механизмы и инструменты. Количественные селекторы это просто одна из идей для этого.
Веб дизайн это всегда изменчивость, гибкость и неопределенность. В нём скорее не знаешь, чем знаешь. Он уникален тем, что представляет с собой вид визуального дизайна, который не определяет формы, а предвидит, какие формы может что-то принять. Для кого-то это неприемлемо и непонятно, но для вас и меня это вызов и удовольствие.
Теги: Добавить метки
Как задать стили отдельному объекту веб-страницы? Общепринятый способ — назначить класс, идентификатор, или обратиться по тегу. Но такая верстка не всегда работает. Особенно когда дело касается вложенных меню, последних элементов списка, CSS-стилей активных или посещенных ссылок. Именно для таких случаев были созданы псевдоклассы. Это особый вид селекторов, которые берегут нервную систему разработчика и существенно упрощают верстку.
Синтаксис и правила использования псевдоклассов
Отличительной чертой псевдоклассов является двоеточие. Именно этот знак отличает их от обычных селекторов. После двоеточия обязательно без пробела идет имя псевдокласса. В конце, если есть необходимость, в скобках указывается значение в виде целого числа, формулы или ключевого слова.
Li:last-child{ padding-bottom: 0; }
Иногда можно встретить двойное написание (::). Эта спецификация была добавлена в CSS3 для обращения к псевдоэлементам::backdrop, ::before, ::after. Они отличаются тем, что добавляют стили объектам, которых нет в дереве DOM. Например, заглавная буква или первая строка.
P::before{ content: ""; display: block; width: 100%; color: #222; }
Все тридцать селекторов мы разбирать не будем, возьмем только те, что означают в CSS последний элемент (:last-child), первый (:first-child). А также рассмотрим специальный псевдокласс (:nth-child), который позволяет обращаться к дочерним элементам по порядковому номеру. Учиться будем на примере создания панели навигации по сайту:
Document Получилось простое меню с четырьмя ссылками белого цвета. С помощью псевдоклассов мы можем выборочно настраивать каждый пункт навигации, менять размер, или сделать их разноцветными. Например, чтобы указать в CSS последний элемент красного цвета, а первый зеленого, нужен следующий код:
Nav a:first-child{ color: green; } nav a:last-child{ color: red; }
Универсальный селектор:nth-child
Этот селектор относится к числу структурных псевдоклассов. С его помощью можно управлять объектами по их нумерации. Порядковое число указывается в скобках и начинается с единицы. Если нужен последний элемент в CSS, для этого используется запись:
/*добавит последнему элементу справа границу красного цвета*/ nav a:nth-child(-1){ border-right: 1px solid red; }
Помимо целочисельных значений:nth-child принимает в качестве значений ключевые слова:
Теперь чтобы добавить границу желтого цвета каждой второй ссылке в панели навигации, достаточно прописать:
Nav a:nth-child(even){ border-bottom: 1px solid yellow; }
Комбинированное использование псевдоклассов
Каскадные таблицы стилей позволяют комбинировать в одном селекторе сразу несколько псевдоклассов. Такой подход может пригодиться, когда необходимо назначить определенные стили всем CSS элементам, кроме последнего.
Nav a:not(:last-child){ padding-right: 10px; }
Дословно запись выше указывает браузеру добавить ко всем ссылкам внутри навигации
Теперь, зная о возможности комбинирования селекторов, добавим нашей панели навигации интерактивности. Для этого будем использовать псевдокласс состояния:hover, который добавляет нужные стили при наведении курсора мышки на объект.
Document С помощью селектора nav a:hover, мы сделали так, чтобы внешний вид ссылок каждый раз менялся при наведении курсора. Так пользователю будет намного проще и интересней взаимодействовать с сайтом. Обратите внимание на запись nav a:nth-child(n). Благодаря ей у каждого пункта меню свой цвет подчеркивания в состоянии:hover.
Можно пойти дальше и добавить:focus и:active для элементов , которые будут менять поведение ссылок во время нажатия. Или окрасить их в другой цвет и увеличить размер шрифта в активном состоянии. С помощью CSS-селекторов оживают даже статичные HTML-страницы и без намека на JavaScript.
Новые псевдоклассы
Псевдоклассы CSS предназначены для выбора элементов на основании информации, не входящей в документ, или информации, которая не может быть выражена обычными селекторами. Вероятно, вы уже использовали псевдоклассы ранее - например, :hover для изменения цвета ссылки, когда пользователь наводит на нее указатель мыши. В CSS3 появилось несколько новых псевдоклассов, заметно упрощающих поиск элементов.
Для начала рассмотрим простой пример таблицы, на которой и будем испытывать новые псевдоклассы:
Перед вами довольно стандартный счет с ценами, количеством единиц товара, суммами строк, промежуточной суммой и общей суммой заказа. Счет было бы удобнее просматривать, если бы строки были окрашены в разные цвета. Также будет полезно изменить цвет итоговой суммы, чтобы она лучше выделялась на общем фоне.
Ниже приведен код таблицы и ее базовое стилевое оформление:
Продукт Цена Количество Общая стоимость Кофе 30 5 150 Рубашка 400 2 800 Красный степлер 50 4 200 Общая стоимость 1150 Доставка 120 Итого 1270 Table { width: 600px; border-collapse: collapse; } th, td { border: none; } th { background-color: #000; color: #fff; }
Чередование цвета строк (:nth-of-type)
Каждый из нас неоднократно видел таблицы с чередованием цвета строк (эффект зебры): этот эффект полезен тем, что упрощает просмотр данных по строкам. Стилевое оформление такого рода лучше всего выполняется средствами уровня представления, то есть CSS. Традиционно задача решалась включением в строки таблицы дополнительных имен классов (например, odd и even для нечетных и четных строк соответственно).
Однако подобное загрязнение разметки таблицы нежелательно, поскольку спецификация HTML5 рекомендует избегать использования имен классов для определения представления. При помощи новых селекторов мы сможем добиться желаемого эффекта без изменения разметки - таким образом, представление будет отделено от контента.
Селектор nth-of-type находит каждый n-й элемент конкретного типа, определяемый формулой или ключевыми словами. Формулы будут более подробно рассмотрены позднее, а пока разберемся с ключевыми словами, потому что их проще понять.
Чтобы каждая вторая строка таблицы была окрашена в другой цвет, проще всего найти все четные строки таблицы и назначить им другой цвет фона. То же самое делается с нечетными строками. В CSS3 имеются ключевые слова even и odd , предназначенные именно для таких ситуаций:
Tr:nth-of-type(even) { background-color: #DCC; } tr:nth-of-type(odd) { background-color: #F3F3F3; }
Фактически этот селектор означает: "Найти каждую четную строку таблицы и задать ее цвет. Затем найти каждую нечетную строку таблицы и задать ее цвет. Так "зебровая" окраска таблицы реализуется без использования сценарного кода или дополнительных имен классов в строках.
Очередная версия стилевого оформления таблицы выглядит так:
Выравнивание текста столбцов (:nth-child)
По умолчанию текст во всех столбцах таблицы выравнивается по левому краю. Мы выровняем по правому краю все столбцы, кроме первого - чтобы цена и количество единиц товара лучше читались. Для этого мы воспользуемся селектором nth-child , но сначала необходимо узнать, как он работает.
Селектор nth-child ищет дочерние элементы заданного элемента; по аналогии с nth-of-type, он может использовать ключевые слова или формулу. Формула определяется в виде an+b, где а - множитель, a b - смещение. Принцип использования формул проще понять на примере. Давайте применим его к контексту таблицы. Для выбора всех строк таблицы можно воспользоваться селектором вида:
Tr:nth-child(n)
В этом примере не указан ни множитель, ни смещение. Все строки таблицы, кроме первой (строка с заголовками столбцов), выбираются при помощи селектора со смещением:
Tr:nth-child(n+2)
А для выбора каждой второй строки таблицы используется множитель 2n:
Tr:nth-child(2n)
Каждая третья строка выбирается при помощи множителя 3n. Если прибавить к множителю смещение, то поиск будет начинаться не от начала таблицы, а с одной из следующих строк. Следующий селектор находит каждую вторую строку, начиная с четвертой:
Tr:nth-child(2n + 4)
Итак, для выравнивания всех столбцов, кроме первого, используется следующая запись:
Td:nth-child(n+2) { text-align: right; }
Выделение последней строки (:last-child)
Таблица уже сейчас смотрится вполне прилично, но начальство требует, чтобы нижняя строка выделялась жирным шрифтом. Для этого мы воспользуемся селектором last-child , который находит последний дочерний элемент группы:
Tr:last-child { font-weight:bold; }
Поиск в обратном направлении (:nth-last-child)
Если стоимость доставки снижена под действием скидки, то соответствующая строка таблицы должна выделяться цветом. Для быстрого поиска этой строки удобно использовать селектор nth-last-child . Вы уже видели, как селектор nth-child и формула an+b используются для выбора конкретных дочерних элементов. Селектор nth-last-child работает практически так же, если не считать того, что он перебирает дочерние элементы в обратном порядке, начиная с последнего. Это позволяет легко найти предпоследний элемент группы, что, собственно, и нужно сделать в нашем примере.
Итак, оформление строки со стоимостью доставки может быть изменено следующим кодом:
Tr:nth-last-child(2) { color: green; }
Селектор определяет конкретный дочерний элемент - второй с конца.