В :nth-childселектора ви позволява да изберете един или повече елементи, основани на техния ред източник, според формула.
/* Select the first list item */ li:nth-child(1) ( ) /* Select the 5th list item */ li:nth-child(5) ( ) /* Select every other list item starting with first */ li:nth-child(odd) ( ) /* Select every 3rd list item starting with first */ li:nth-child(3n - 2) ( ) /* Select every 3rd list item starting with 2nd */ li:nth-child(3n - 1) ( ) /* Select every 3rd child item, as long as it has class "el" */ .el:nth-child(3n) ( )Той е дефиниран в спецификациите на CSS Selectors Level 3 като „структурен псевдоклас“, което означава, че се използва за оформяне на съдържание въз основа на връзката му с родителските и братските елементи.
Да предположим, че изграждаме CSS мрежа и искаме да премахнем полето на всеки четвърти модул на мрежата. Ето този HTML:
One Two Three Four Five Вместо да добавяме клас към всеки четвърти елемент (например .last), можем да използваме :nth-child:
.module:nth-child(4n) ( margin-right: 0; )На :nth-childселектора се аргумент: това може да бъде едно цяло число, ключови думи even, oddили формула. Ако е посочено цяло число, е избран само един елемент, но ключовите думи или формула ще итерират през всички дъщери на родителския елемент и ще изберат съвпадащи елементи - подобно на навигацията в елементи в JavaScript масив. Ключовите думи „четни“ и „нечетни“ са ясни (съответно 2, 4, 6 и т.н. или съответно 1, 3, 5). Формулата се изгражда с помощта на синтаксиса an+b, където:
- "A" е целочислена стойност
- „N“ е буквалната буква „n“
- „+“ Е оператор и може да бъде „+“ или „-“
- „B“ е цяло число и се изисква, ако във формулата е включен оператор
Важно е да се отбележи, че тази формула е уравнение и итерира през всеки елемент от сестра, определяйки кой ще бъде избран. "N" частта от формулата, ако е включена, представлява набор от нарастващи положителни цели числа (точно като итерация през масив). В горния ни пример избрахме всеки четвърти елемент с формулата 4n, която работеше, защото всеки път, когато даден елемент беше проверен, „n“ се увеличаваше с един (4 × 0, 4 × 1, 4 × 2, 4 × 3 и т.н.). Ако редът на даден елемент съвпада с резултата от уравнението, той се избира (4, 8, 12 и т.н.). За по-задълбочено обяснение на математиката, моля, прочетете тази статия.
За илюстрация по-нататък, ето няколко примера за валидни :nth-childселектори:
За щастие не винаги трябва да правите математика сами - има няколко :nth-childтестера и генератори:
- CSS-Tricks Tester
- Тестерът на Леа Веру
: nth-child (an + b of)
Има малко известен филтър, който може да бъде добавен :nth-childсъгласно спецификацията на CSS селектори: Възможността за избор :nth-childна подмножество от елементи, използвайки of формата. Да предположим, че имате списък със смесено съдържание: Някои имат класа .video, други имат класа .pictureи искате да изберете първите 3 снимки. Можете да го направите с филтъра „на“ по следния начин:
:nth-child(-n+3 of .picture) ( /* Selects the first 3 elements applied not to ALL children but only to those matching .picture */ )Имайте предвид, че това е различно от добавянето на селектор директно към :nth-childселектора:
.picture:nth-child(-n+3) ( /* Not the same! This applies to elements matching .picture which _also_ match :nth-child(-n+3) */ )Това може да стане малко объркващо, така че един пример може да помогне да се илюстрира разликата:
Поддръжката на браузъра за филтъра “на” е много ограничена: Към момента на писането само синтаксис поддържаше Safari. За да проверите състоянието на любимия си браузър, тук има отворени въпроси, свързани с :nth-child(an+b of s):
- Firefox: Поддръжка за n-то дете (An + B от sel)
- Chrome: Внедряване: nth-child (an + b of S)
Точки на интерес
:nth-childитерира през елементи, започвайки от горната част на реда на източника. Единствената разлика между него и:nth-last-childе, че последният итерира през елементи, започвайки от дъното на изходния ред.- Синтаксисът за избор на първия
nброй елементи е малко контраинтуитивен. Започвате с-nплюс положителния брой елементи, които искате да изберете. Например,li:nth-child(-n+3)ще изберете първите 3liелемента. - В
:nth-childселектора е много подобен на:nth-of-type, но с една критична разлика: тя е по-специфичен. В нашия пример по-горе те биха дали същия резултат, защото ние итерираме само върху.moduleелементи, но ако итерираме по по-сложна група от братя и сестри,:nth-childбиха се опитали да съвпаднат с всички братя и сестри, а не само с братя и сестри от същия тип елементи. Това разкрива силата на:nth-child-it може да избере всеки елемент от братя и сестри в подреждане, не само елементи, които са посочени преди дебелото черво.
Поддръжка на браузър
| Chrome | Сафари | Firefox | Опера | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Всякакви | 3.2+ | Всякакви | 9,5+ | 9+ | Всякакви | Всякакви |
:nth-childбеше въведен в CSS Selectors Module 3, което означава, че старите версии на браузърите не го поддържат. Съвременната поддръжка на браузъра обаче е безупречна и новите псевдоселектори се използват широко в производствените среди. Ако се нуждаете от по-стара поддръжка на браузъра, или polyfill за IE, или използвайте тези селектори по некритични начини - прогресивно подобрение, което се препоръчва.