Як працює css-селектор nth-child, css-tricks по-російськи

Як працює CSS-селектор nth-child

У CSS існує селектор, якщо бути більш точним, псевдо-селектор, званий nth-child. Приклад його використання:

Вищенаведений CSS робить наступне: застосовує стилю для кожного третього елемента ненумерованого списку. А саме 3-го, 6-го, 9-го, 12-го і т.д. Але як це працює? А також яку вигоду можна отримати використовуючи nth-child?

Основний сенс полягає у вираженні в дужках. nth-child приймає два ключових слова: even (парний) і odd (непарний). Сенс їх абсолютно ясний. Even вибирає парні елементи (2, 4, 6), odd - непарні (1, 3, 5).

Як показано в прикладі вище, nth-child може обробляти вираження. Яке найпростіше можливе вираз? Просто число. Якщо ви напишіть яке-небудь число в дужках, то буде обраний один єдиний елемент. Наприклад, виберемо п'ятий елемент списку:

Повернемося до нашого першого прикладу, в якому ми використовували вираз (3n + 3). Як він працює? Чому він вибирає кожен третій елемент? Вся суть у змінній n. Вона приймає цілі значення від нуля і більше. Давайте розглянемо докладніше:

Тепер спробуємо такий вираз: nth-child (2n + 1):

В результаті отримали те ж саме що і у випадку з odd. таким чином немає потреби часто використовувати такий вислів. Більш того, наш перший приклад теж можна спростити і використовувати замість оригінального вираження (3n + 3), вираз (3n):

Як бачите, результат той же, але не треба писати "+3". Також ми можемо використовувати негативні значення в вираженні. Наприклад, 4n-1:

Використання негативних значень для коефіцієнта при n, виглядає злегка дивно, тому що в разі негативного результату не буде знайдено відповідність. Вам треба буде постійно змінювати вираз, щоб додати позитивних елементів. Як виявилося, цей підхід дуже зручний для вибору перших n елементів. Розглянемо приклад з "-n + 3":

кросбраузерність

nth-child є одним з тих самих нещасних атрибутів, які є повністю кросбраузерності, за винятком абсолютного нуля в IE, навіть 8-ої версії. Тому, коли мова заходить про його використанні, то якщо очікуваний результат - це в деякому роді візуальний ефект (наприклад розфарбування рядків якоїсь таблиці), то це ідеальний підхід. Але, ймовірно, не варто використовувати його для чогось більш важливого, що може вплинути, наприклад, на коректність верстки.

Звичайно, якщо ви використовуєте jQuery, то вам не варто переживати з цього приводу, так як jQuery працює навіть в Internet Explorer.

Ну і наостанок

Ви можете пограти з різними виразами для селектора на сторінці з прикладом.