CSS псевдокласи: стилізація елементів з індексами

30

Від автора: в CSS є селектори для пошуку елементів на основі їх положення в дереві документа. Їх називають індексними псевдоклассами, тому що вони дивляться на положення елемента, а не на його тип, атрибути або ID. Всього їх п’ять.

first-child

last-child

only child

nth-child()

nth-last-child()

:first-child :last-child

З назви ви могли здогадатися, що псевдокласи :first-child :last-child обирають перший і останній дочірній елемент у вузлі (елементі). Як і з іншими псевдоклассами, :first-child :last-child надають мінімальний сторонній вплив при використанні простих селекторів.

Розглянемо HTML і CSS нижче:

:first-child and :last-child
body {
font: 16px / 1.5 sans-serif;
}
:first-child {
color: #e91e63;
}
:last-child {
color: #4caf50;
}

List of fruits

  • Apples
  • Bananas
  • Blueberries
  • Oranges
  • Strawberries

На скріншоті нижче показаний результат.

CSS псевдоклассы: стилизация элементов по индексам

Заголовок h2 і перший li забарвилися в рожевий, так як :first-child не прив’язаний до конкретних елементів. Тег h2 – перша дитина тега body, а li – перший дочірній елемент ul. Але чому залишилися елементи li зелені? Тому що :last-child теж не прив’язаний до конкретного елементу, а ul є останнім дочірнім елементом в тегу body. По суті, в стилях вище ми прописали *:first-child і *:last-child.

Якщо додати до :first-child :last-child простий селектор, вони стануть конкретніше. Давайте обмежимо нашу вибірку тільки елементами списку. Замініть :first-child на li:first-child :last-child на li:last-child. На скріншоті нижче показаний результат.

CSS псевдоклассы: стилизация элементов по индексам

:nth-child (): nth-last-child()

Вміти вибирати перший і останній дочірні елементи в документі непогано. А що якщо потрібно вибрати парні або непарні елементи? Може, нам потрібно вибрати шостий елемент в дереві або застосувати стилі до кожного третього дочірньому елементу. Тут нам допоможуть псевдокласи :nth-child (): nth-last-child().

Як і :not, :nth-child (): nth-last-child() також є функціональними псевдоклассами. Вони приймають один аргумент, який повинен бути:

ключовим словом odd;

ключовим словом even;

цілочисельним значенням типу 2 або 8;

аргументом у формі Ап+B [5], де А – крок, B – зміщення, а n – змінна з позитивним цілим числом числом.

Останній аргумент трохи складніше інших. Розберемо його трохи пізніше.

Чим відрізняються :nth-child (): nth-last-child()? Вони відрізняються точкою відліку: :nth-child() вважає вперед, а :nth-last-child() – назад. CSS індекси використовують натуральні числа і починаються з 1, а не з 0.

З допомогою псевдокласів :nth-child (): nth-last-child() зручно створювати чергуються візерунки. Смугаста таблиця – ідеальний приклад використання. CSS нижче присвоює парних рядків у таблиці світлий синювато-сірий фон, результат можна побачити на скріншоті нижче:

tr:nth-child(even) {
background: rgba(96, 125, 139, 0.1);
}

CSS псевдоклассы: стилизация элементов по индексам

Якщо перейти з :nth-child :nth-last-child, смуги інвертуються, так як почнеться відлік з низу. Дивіться скріншот нижче.

CSS псевдоклассы: стилизация элементов по индексам

А хочете що-небудь складніше, з більш складними аргументами? Давайте створимо документ з 20 елементами, як показано нижче.

CSS псевдоклассы: стилизация элементов по индексам

З допомогою :nth-child (): nth-last-child() можна вибрати один певний елемент. Можна вибрати всі дочірні елементи після заданої позиції, або можна вибрати елементи з кратністю зі зміщенням. Давайте змінимо фон шостого елемента:

.item:nth-child(6) {
background: #e91e63;
}

Результат.

CSS псевдоклассы: стилизация элементов по индексам

А якщо потрібно вибрати кожен третій елемент? Тут нам допоможе синтаксис Ап+В:

.item:nth-child(3n) {
background: #e91e63;
}

Ще раз, А – крок. Це множник для n, що починається з 1. Тобто якщо А = 3, то 3n вибере третій, шостий і дев’ятий елементи і т. д. Саме це можна спостерігати на скріншоті нижче.

CSS псевдоклассы: стилизация элементов по индексам

Тут вже все трохи цікавіше. З допомогою :nth-child (): nth-last-child() можна вибрати всі елементи після заданої точки. Давайте виберемо всі елементи, крім перших семи:

.item:nth-child(n+8) {
background: #e91e63;
}

Тут крок не заданий. Як результат, n+8 вибирає всі елементи n, починаючи з восьмого. Дивіться скріншот нижче.

CSS псевдоклассы: стилизация элементов по индексам

Зауваження: негативне зміщення

Негативні значення і діапазони також валідні. Запис типу :nth-child(-n+8) інвертує вибірку і вибирає перші вісім елементів.

За допомогою зміщення і кроку можна вибрати кожен третій елемент, починаючи з п’ятого:

.item:nth-child(3n+5) {
background: #e91e63;
}

Результат.

CSS псевдоклассы: стилизация элементов по индексам

only child

Псевдоклас only child вибирає елемент тільки в тому випадку, якщо він єдиний дочірній елемент. Нижче представлено два маркованих списку. У першому один елемент, у другому три:

  • Apple
  • Orange
  • Banana
  • Raspberry

Селектор li:only child{color: #9c27b0;} вибере

  • Apple
  • , так як це єдиний дочірній елемент першого списку. Елементи другого списку у вибірку не потрапляють, так як там три суміжних елемента. Результат показаний нижче.

    CSS псевдоклассы: стилизация элементов по индексам

    :empty

    З допомогою псевдокласу :empty можна вибрати елементи, у яких немає дочірніх елементів. Псевдоклас :empty говорить сам за себе (empty від англ. «порожній»). Щоб потрапити у вибірку :empty, елемент повинен бути абсолютно порожнім, не повинно бути пробілів. Тобто

    потрапляє у вибірку, а

    немає.

    Іноді WYSIWYG редактори вставляють порожні теги p ваш контент. З допомогою :empty і :not можна робити так, щоб до цих елементів не застосовувалися стилі. Наприклад, p:not(:empty).

    Вибір елементів певного типу їх індексу

    Описані в попередньому розділі псевдокласи вибирають елементи, якщо ті займають певну позицію в дереві документа. Наприклад, p:nth-last-child(2) вибере всі теги p перед останнім всередині батьківського блоку.

    У цьому розділі ми поговоримо про типізованих індексних псевдоклассах. Ці псевдокласи також вибирають елементи за значенням індексу, але вибір обмежений певним типом. Наприклад, потрібно вибрати п’ятий тег p або парні h2.

    Існує п’ять таких псевдокласів, імена яких повністю протилежні їх нетипизированным колегам:

    first-of-type

    last-of-type

    only-of-type

    nth-of-type()

    nth-last-of-type()

    Грань між ними і дочірніми індексними псевдоклассами тонка. Запис p:nth-child(5) знаходить тільки п’ятий тег p, а запис p:nth-of-type(5) знаходить всі теги p і виділяє серед них п’ятий.

    Давайте створимо інший документ. У ньому також 20 елементів, тільки деякі — це теги p, а інші – div. Теги p з округленими кутами, дивіться скріншот нижче.

    CSS псевдоклассы: стилизация элементов по индексам

    Використання first-of-type, last-of-type і only-type

    З допомогою :first-of-type можна вибрати перший елемент, що підпадає під селектор. Давайте змінимо колір першого p на зелений:

    p:first-of-type {
    background: #cddc39;
    }

    Така запис вибере всі теги p, що є першим дочірнім елементом в батьківському блоці. Дивіться скріншот нижче.

    CSS псевдоклассы: стилизация элементов по индексам

    Псевдоклас :last-of-type працює схожим чином. Вибирається останній елемент у батьківському блоці. Подивитися результат можна нижче. А only-of-type вибере елемент тільки, якщо він є єдиним дочірнім елементом такого типу всередині батьківського блоку. Показано нижче.

    CSS псевдоклассы: стилизация элементов по индексам

    CSS псевдоклассы: стилизация элементов по индексам

    Розглянемо ще один приклад використання :first-of-type, на цей раз з псевдоэлементом. Пам’ятайте псевдоэлемент ::first-letter, про який ми розповідали раніше в цій главі? Як ви пам’ятаєте, з його допомогою створювалася перша велика літера для всіх елементів, до яких він застосовувався. А що якщо ми обмежимо його дію лише на перший параграф:

    p:first-of-type::first-letter {
    font: bold italic 3em / .5 serif;
    color: #3f51b5;
    }

    На скріншоті нижче показано, що тепер тільки першого параграфа заголовна літера, незважаючи на наявність заголовка перед параграфом.

    CSS псевдоклассы: стилизация элементов по индексам

    Використання :nth-of-type :nth-last-of-type

    :nth-of-type (): nth-last-of-type() також є функціональними псевдоклассами. Вони приймають ті ж аргументи, що і :nth-child (): nth-last-child(). Проте як і :first-of-type :last-of-type, індекси присвоюються тільки елементів одного типу. Наприклад, щоб вибрати перший тег p і всі наступні, можна взяти ключове слово odd і :nth-of-type():

    p:nth-of-type(odd) {
    background: #cddc39;
    color: #121212;
    }

    На скріншоті нижче видно, що обрані тільки непарні теги p, а не просто непарні елементи.

    CSS псевдоклассы: стилизация элементов по индексам

    Точно так само :nth-last-of-type(even) вибере парні теги p, але відлік почнеться з останнього p в документі. У нашому прикладі відлік почнеться з об’єкта, 18 (див. нижче).

    CSS псевдоклассы: стилизация элементов по индексам

    Якщо досі щось залишилося незрозуміло, поиграйтесь з інструментом Paul Maloney Nth-Test tool або подивіться приклади на Nth Master. Обидва проекти ідеально підходять для вивчення псевдокласів.