Використання псевдокласу CSS nth-child
Псевдокласи можна використовувати для вибору певного елемента зі списку. У цьому уроці ми розповімо про псевдоклас:nth-child, що можна створити за допомогою цього псевдокласу і чим він може бути корисний. Псевдоклас: nth-child дозволяє вибрати групу елементів із загальними властивостями. Найчастіше він використовується для вибору парних чи непарних елементів із групи. Нерідко його використовують, щоб таблиця виглядала як зебра, задаючи різні кольори фону парним і непарним рядам.
Ще псевдоклас :nth-child дозволяє розділити елементи із загальною властивістю на групи і потім вибрати певний елемент із кожної групи, використовуючи наступний синтаксис:
Тутa визначає кількість елементів у групі, аb визначає, який елемент із групи буде обраний. Якщо використовувати значення2n+1, то елементи будуть розділені на групи по два, і будуть вибрані перші елементи кожної групи, тобто елементи з непарним порядковим номером. Якщо використовувати значення2n+2, то елементи знову будуть розділені на групи по два, але тепер будуть вибрані другі елементи кожної групи, тобто елементи з парним порядковим номером.
Ще як приклад для розуміння псевдокласу: nth-child ми виберемо з його допомогою кожен четвертий елемент, тобто четвертий, восьмий, дванадцятий, шістнадцятий і т. д. Для цього розділимо елементи на групи по чотири і потім виберемо кожен четвертий елемент елемент.
Нижче наведено список із десяти елементів, і ми скористаємося псевдокласами :nth-child, :first-child та :last-child, щоб вибрати елементи, які хочемо виділити.
Використання псевдокласу CSS: nth-child для вибору єдиного елемента
Задаючи псевдоклассу :nth-child значення як числа, можна вибрати, якого нащадку з групи звернутися:
• Елемент 1 • Елемент 2 • Елемент 3• Елемент 4 • Елемент 5 • Елемент 6 • Елемент 7 • Елемент 8 Елемент 9 Елемент 10
Використання псевдокласу CSS: nth-child для вибору всіх елементів, крім перших п'яти
Якщо задати псевдокласу :nth-child значення якn+ число, можна вибрати всі елементи, починаючи з елемента з цим порядковим номером:
• Елемент 1 • Елемент 2 • Елемент 3 • Елемент 4 • Елемент 5• Елемент 6• Елемент 7• Елемент 8• Елемент 9• Елемент 10
Використання псевдокласу CSS :nth-child для вибору лише перших п'яти елементів
Коли ми задаємо псевдокласу :nth-child значення як негативногоn+ число, ми вибираємо все елементи, що є елемента з цим порядковим номером:
• Елемент 1• Елемент 2• Елемент 3• Елемент 4• Елемент 5 • Елемент 6 • Елемент 7 • Елемент 8 • Елемент 9 • Елемент 10
Використання псевдокласу CSS: nth-child для вибору кожного третього елемента
Псевдоклас :nth-child можна використовувати, щоб вибрати послідовність елементів, задаючи, скільки елементів у послідовності та порядковий номер потрібного елемента. Якщо встановити значення3n+1, буде обрано кожен третій елемент, починаючи з першого:
• Елемент 1 • Елемент 2 • Елемент 3• Елемент 4 • Елемент 5 • Елемент 6• Елемент 7 • Елемент 8 • Елемент 9• Елемент 10
Використання псевдокласу CSS :nth-child для вибору лише непарних елементів
Можна встановити псевдокласу :nth-child значення odd (непарний), щоб вибрати всі елементи з непарними порядковими номерами. Тобто,перший, третій, п'ятий, сьомий, дев'ятий тощо елементи. Це дуже зручно, щоб задавати кольори сусіднім рядам таблиці.
• Елемент 1 • Елемент 2• Елемент 3 • Елемент 4• Елемент 5 • Елемент 6• Елемент 7 • Елемент 8• Елемент 9 • Елемент 10
Використання псевдокласу CSS :nth-child для вибору лише парних елементів
Цей приклад показує те, що й минулий, але цього разу вибрано всі елементи з парними порядковими номерами. Тобто, другий, четвертий, шостий, восьмий, десятий і т. д. елементи:
• Елемент 1• Елемент 2 • Елемент 3• Елемент 4 • Елемент 5• Елемент 6 • Елемент 7• Елемент 8 • Елемент 9• Елемент 10
Використання псевдокласу CSS :first-child для вибору першого елемента
Інший псевдоклас: first-child вибере перший елемент:
• Елемент 1 • Елемент 2 • Елемент 3 • Елемент 4 • Елемент 5 • Елемент 6 • Елемент 7 • Елемент 8 Елемент 9 Елемент 10
Використання псевдокласу CSS :last-child для вибору останнього елемента
Крім псевдокласу :first-child є псевдоклас :last-child, який вибере останній елемент із групи елементів:
• Елемент 1 • Елемент 2 • Елемент 3 • Елемент 4 • Елемент 5 • Елемент 6 • Елемент 7 • Елемент 8 • Елемент 9• Елемент 10
Використання псевдокласу CSS :nth-last-child для вибору передостаннього елемента
Ще можна використовувати псевдоклас: nth-last-child, який поєднує в собі можливості псевдокласів: last-child і: nth-child, щоб починати відлік елементів з кінця. Тобто, можна вибрати елемент, відраховуючи порядкові номери з кінця групи, наприклад,групі з десяти елементів можна вибрати другий з кінця елемент:
• Елемент 1 • Елемент 2 • Елемент 3 • Елемент 4 • Елемент 5 • Елемент 6 • Елемент 7 • Елемент 8• Елемент 9 • Елемент 10
Ознайомтеся з можливостями псевдокласу nth-child за допомогою «Конструктора nth-child».
Додаткові матеріали
Якщо ви хочете глибше ознайомитися з псевдокласом :nth-child і бути в курсі змін його можливостей, прочитайте його на сторінці документації CSS.
Автор урокуPaul Underwood