: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) ( )Дефинисан је у спецификацији ЦСС Селецторс Левел 3 као „структурна псеудо-класа“, што значи да се користи за обликовање садржаја на основу односа са родитељским и братским елементима.
Претпоставимо да градимо ЦСС мрежу и желимо да уклонимо маргину на сваком четвртом модулу мреже. Ево тог ХТМЛ-а:
One Two Three Four Five Уместо да .lastдодамо класу свакој четвртој ставци (нпр. ), Можемо користити :nth-child:
.module:nth-child(4n) ( margin-right: 0; ):nth-childСелектор узима аргумент: ово може бити појединачни број, кључне речи even, oddили формула. Ако је наведен цео број, изабран је само један елемент, али кључне речи или формула ће се прелиставати кроз све подређене елементе надређеног елемента и одабрати одговарајуће елементе - слично навигацији ставкама у ЈаваСцрипт низу. Кључне речи „парно“ и „непарно“ су директне (2, 4, 6 итд. Или 1, 3, 5). Формула је конструисана користећи синтаксу an+b, где:
- „А“ је целобројна вредност
- „Н“ је дословно слово „н“
- „+“ Је оператор и може бити „+“ или „-“
- „Б“ је цео број и потребан је ако је оператор укључен у формулу
Важно је напоменути да је ова формула једначина и понавља се кроз сваки братски елемент, одређујући који ће бити одабран. „Н“ део формуле, ако је укључен, представља скуп растућих позитивних целих бројева (баш као и понављање кроз низ). У нашем претходном примеру изабрали смо сваки четврти елемент са формулом 4n, који је функционисао, јер се сваки пут када је елемент проверен, „н“ повећао за један (4 × 0, 4 × 1, 4 × 2, 4 × 3 итд.). Ако се редослед елемента подудара са резултатом једначине, он се бира (4, 8, 12 итд.). За детаљнија објашњења математике прочитајте овај чланак.
Да бисмо илустровали даље, ево неколико примера ваљаних :nth-childселектора:
Срећом, не морате увек сами да рачунате - постоји неколико :nth-childтестера и генератора:
- ЦСС-Трицкс Тестер
- Тестер Леа Вероуа
: н-то дете (+ б)
Постоји мало познати филтер који се може додати :nth-childпрема спецификацији ЦСС Селецторс: Могућност одабира :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) */ )Ово може постати мало збуњујуће, па пример може помоћи у илустрацији разлике:
Подршка прегледача за филтер „оф“ је врло ограничена: од писања овог текста само је Сафари подржавао синтаксу. Да бисте проверили статус омиљеног прегледача, ево отворених питања у вези са :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-ит може да изабере било који елемент брата или сестре у аранжману, не само елементе који су наведени пре двотачке.
Подршка прегледача
| Хром | Сафари | Фирефок | Опера | ИЕ | Андроид | иОС |
|---|---|---|---|---|---|---|
| Било који | 3.2+ | Било који | 9.5+ | 9+ | Било који | Било који |
:nth-childје представљен у ЦСС Селецторс Модуле 3, што значи да га старе верзије прегледача не подржавају. Међутим, савремена подршка за прегледаче је беспрекорна, а нови псеудо-селектори се широко користе у производним окружењима. Ако вам је потребна старија подршка за прегледач, или полифил за ИЕ, или користите ове бираче на некритичне начине, уз прогресивно побољшање, што се препоручује.