Разбиране на CSS :nth-child() селектора

Както всички CSS селектори, можете да използвате :nth-child(), за да идентифицирате елементи в уеб страница и да приложите стилове към тях. Но този селектор ви позволява да стесните набор от братя и сестри въз основа на тяхната относителна позиция.

Селекторът поддържа някои основни ключови думи за общи случаи, но също така предоставя мощен синтаксис за съвпадение на шаблони. Използвайки го, можете да изберете елементи въз основа на редовни, повтарящи се модели или по-сложни дефиниции, въз основа на вашите нужди.

Синтаксисът на селектора :nth-child().

Като Селектор на CSS псевдокласове, синтаксисът :nth-child() се различава от другите селектори. Той приема аргумент като модел за съвпадение на елементи в набор от братя и сестри:

:nth-child(args) {
/*...*/
}

Основният акцент е върху аргументите в скобите. Тези аргументи дефинират подмножеството от елементи за избор.

Използване на стойности на ключови думи за често срещани случаи

Този селектор може да побере две стойности на ключови думи: странно и дори. Те са особено полезни за стилизиране на алтернативни редове в таблица.

Един прост подреден списък е друг добър пример за това кога можете да използвате тези стойности на ключови думи:

<ol>
<li>Item 1li>
<li>Item 2li>
<li>Item 3li>
<li>Item 4li>
<li>Item 5li>
<li>Item 6li>
<li>Item 7li>
ol>

Използвайки :nth-child (нечетно) селектор, можете да промените цвета на всеки алтернативен елемент:

:nth-child(odd) {
color: red;
}

Елементите започват с индекс 1, така че първият елемент ще се появи в червено, след това третият и така нататък:

Функционална нотация за повече гъвкавост

Можете да използвате едно цяло число, за да изберете отделен елемент, като това:

li:nth-child(4) {
color: red;
}

В този случай селекторът отговаря само на четвъртия елемент в списъка:

Този синтаксис е специален случай на по-общия функционален синтаксис, който избира елементи, които отговарят на даден модел. Този синтаксис е:

:nth-child(An+B) {
/*...*/
}

В тази нотация, А е размерът на стъпката. Това означава колко пъти селекторът се движи, за да изберете следващия елемент. Позволява ви да изберете всеки друг елемент, всеки трети елемент и т.н. б е началната точка, от която започва селекцията.

Например вземете аргумента 3n+1:

li:nth-child(3n+1) {
color: red;
}

Това ще започне селекцията от първия елемент и ще продължи с всеки трети елемент след това:

Сравнете това с израза 3n+2:

li:nth-child(3n+2) {
color:red;
}

Това все още избира всеки трети елемент, но сега започва от втория елемент в списъка:

Друг интересен пример е :nth-child (n+3):

li:nth-child(n+3) {
color: red;
}

Този ще избере всеки елемент (n), започвайки от третия (+3). Ще изглежда така:

Можете също да използвате изваждане, за да постигнете определени резултати:

li:nth-child(3n-1) {
color: red;
}

Този пример все още избира всеки трети елемент, но започва от „минус първи“. На практика това означава, че ще избере втория елемент в списъка, след това петия и така нататък:

На Синтаксис

Можете също да използвате ключовата дума на последвано от a селектор като аргумент в селектора :nth-child(). Този синтаксис ви позволява да стесните възможните елементи, от които обикновеният шаблон избира.

Например, представете си, че вашето маркиране е по-сложно от оригинала:

<ol>
<liclass="old">Item 1li>
<liclass="new">Item 2li>
<liclass="new">Item 3li>
<liclass="old">Item 4li>
<liclass="new">Item 5li>
<liclass="new">Item 6li>
<liclass="new">Item 7li>
ol>

Сега използвайте :nth-child, за да изберете четните елементи от набора от тези със специфичен клас:

.new {
font-weight: bold;
}
li:nth-child(evenof.new) {
color: red;
}

Забележете как само четните удебелени елементи са червени:

Също така помислете как това се различава от li.new: n-то дете (четно) който цели .нови елементи, но само ако са четни. Това биха били елементи 2 и 6 в горния пример.

Работа със селектора :nth-child().

Можете да постигнете уникален дизайн с помощта на селектора :nth-child(). Можете да създавате цветни уебсайтове и да подчертавате редове и колони в таблици с данни. Комбинирането му с други CSS селектори ще ви помогне да създадете сложни оформления и дизайни.