Як працює nth-child
Існує такий селектор, точніше псевдоклас, званий: nth-child. Ось приклад його використання:
Що робить CSS-код, наведений вище? Він вибирає кожен третій елемент всередині маркованого списку: це 3-й, 6-й, 9-й, 12-й і т.д. Давайте подивимося, як саме працює цей вислів і що ще можна зробити за допомогою: nth-child.
Все залежить від того, що знаходиться між дужками. Селектор: nth-child приймає два ключових слова: even і odd. Тут все просто: even вибирає парні елементи, такі як 2-ий, 4-ий, 6-ий і т.д. а odd вибирає непарні елементи, такі як 1-й, 3-й, 5-й і т.д.
Як видно з першого прикладу. nth-child також приймає як параметр вираження. У тому числі і найпростіші рівняння, інакше кажучи, просто числа. Якщо поставити їх в дужки, буде обраний тільки один елемент з відповідним номером. Наприклад, ось як вибрати тільки п'ятий елемент:
- (3 × 0) + 3 = 3 = 3-й елемент
- (3 × 1) + 3 = 6 = 6-й елемент
- (3 × 2) + 3 = 9 = 9-й елемент і т.д.
А як щодо: nth-child (2n + 1)?
- (2 × 0) + 1 = 1 = 1-й елемент
- (2 × 1) + 1 = 3 = 3-й елемент
- (2 × 2) + 1 = 5 = 5-й елемент і т.д.
Так, стоп! Адже це те ж саме, що і odd. Тоді, можливо, не варто використовувати цей вислів? Але хіба в цьому випадку ми не ставимо під наш перший приклад зайвого ускладнення? Що, якщо замість 3n + 3 ми запишемо 3n + 0 або ще простіше 3n?
- (3 × 0) = 0 = нічого немає
- (3 × 1) = 3 = 3-й елемент
- (3 × 2) = 6 = 6-й елемент
- (3 × 3) = 9 = 9-й елемент і т.д.
Отже, як ви можете бачити, результат вийде такий же, а значить, немає необхідності в +3. Ми можемо використовувати і негативні значення n. з таким же успіхом, як і віднімання в рівняннях. Наприклад, 4n-1:
- (4 × 0) - 1 = -1 = нічого немає
- (4 × 1) - 1 = 3 = 3-й елемент
- (4 × 2) - 1 = 7 = 7-й елемент і т.д.
Використання -n може здатися дивним - адже якщо кінцевий результат негативний, то ніякі елементи в вибірку не потраплять. Але якщо доповнити рівняння і знову зробити результат позитивним, то вибірка виявиться досить цікавою: за допомогою неї можна буде отримати перші n елементів, наприклад так: -n + 3:
- -0 + 3 = 3 = 3-й елемент
- -1 + 3 = 2 = 2-й елемент
- -2 + 3 = 1 = 1-й елемент
- -3 + 3 = 0 = нічого немає і т.д.
На SitePoint є хороший довідник з милою табличкою. яку я безсоромно опублікую тут:
підтримка браузерами
Селектор: nth-child - один з небагатьох CSS-селекторів, який майже повністю підтримується в сучасних браузерах і абсолютно не підтримуються в IE, навіть в IE8. Тому коли справа доходить до його використання, і кінцевий результат зроблений за технологією прогресивного поліпшення - ви можете сміливо використовувати його для деяких оформлювальних елементів, на зразок забарвлення рядків таблиці. Однак не варто застосовувати його в більш серйозних випадках. Наприклад, покладатися на нього в розкладці сайту або видаляти праве поле з кожного третього блоку в сітці три на три, щоб вони увійшли в ряд.
Порятунком тут може послужити бібліотека jQuery. яка реалізує підтримку всіх CSS-селекторів, включаючи: nth-child. навіть в Internet Explorer.
Все одно неясно?
Я не великий шанувальник фрази я краще сприймаю візуальну інформацію. І ви, звичайно, теж. Але приклади є надзвичайно корисними саме в таких ситуаціях. Щоб полегшити розуміння, я зробив невелику тестову сторінку. На ній ви зможете написати свої рівняння і нижче побачити те, що потрапить до вибірки.
Також загляньте на сторінку корисних рецептів: nth-child. там ви зможете знайти код для найбільш поширених випадків.
Існує такий селектор, точніше псевдоселектор, званий: nth-child.
Напевно, все-таки псевдоклас, а не псевдоселектор?
0 - не натуральне число, в даному реченні мова йде про цілих числах
Іван, спасибі, виправили.
> Як видно з першого прикладу. nth-child також приймає як параметр рівняння.
Це не рівняння, цей вислів.
Потім доповніть рівняння. Так 3n це 3xn, а все рівняння разом це (3xn) +3.
Тут напевно «3 × n» і «(3 × n) +3» має бути.
Bolk, все виправили, спасибі.
А можете порадити якийсь форум, або місце де можна обговорити питання семантики, я сам прихильник семантично вірного коду але є багато неточностей і неоднозначних речей.
"Згідно зі специфікацією, такого поняття, не існує."
А зараз по вашому посиланню в специфікації вже псевдокласи)