теж можна порахувати, та його порядковий номер буде третім (третій дочірній елемент свого батька ). Щоб стилізувати ці елементи, нам необхідно використати псевдоклас :nth-child.

Перейдемо, наприклад:

Перший заголовок h2 тега body

• один
• два
• три

Другий заголовок h2 тега body

:nth-childми стилізували елементи

і

, які мають певний порядковий номер дочірнього елемента всередині батьківських елементів.

Результат нашого прикладу:

Стилізація за ключовим словом

Як значення псевдокласу :nth-child()може виступати як порядковий номер дочірніх елементів, які потрібно стилізувати, а й ключові слова, які можуть визначати цілу групу елементів. Як ключове слово можна використовувати два значення:

• even (парні елементи)
• odd (непарні елементи)

Стилізація елементів з використанням ключових слів має дуже широке застосування, тому що ви можете вибрати і стилізувати парні, або непарні дочірні елементи в документі.

Давайте для прикладу створимо дві прості таблиці з різними стильовими класами та розглянемо наочну різницю у застосуванні значень ключових слів псевдокласу :nth-childдля HTML елемента , Який визначає рядок таблиці:

Значення even (парні)

1 рядок	Позиція	Кількість
2 рядок
3 рядок
4 рядок
5 рядок

Значення odd (непарні)

1 рядок	Позиція	Кількість
2 рядок
3 рядок
4 рядок
5 рядок

У цьому прикладі з використанням псевдокласу :nth-child()ми стилізували парнірядки першої таблиці (елементи ) та непарніу другій таблиці.

Стилізація за простою математичною формулою

Псевдоклас :nth-child()дозволяє вибрати як парні, непарні, чи дочірні елементи з певним порядковим номером, а й дочірні елементи, задані по елементарної математичної формуле. Давайте розглянемо наступний селектор і розберемо, що означає цей запис:

td:nth-child(4n+2)

) усередині рядка, починаючи з другого осередку таблиці, буде стилізована:

• 4n- Кожен четвертий елемент.
• 2

У формулах допускається використання значень зі знаком віднімання, але цього зазвичай немає необхідності:

td:nth-child(4n-1)( background-color: lightblue; / * встановлюємо колір заднього фону * / )

Цей селектор означає, що кожен четвертий осередок таблиці ( ) всередині рядка, починаючи з третього осередку таблиці (-1 осередку немає з об'єктивних причин, тому відбувається зрушення вліво), буде стилізовано:

• 4n- Кожен четвертий елемент.
• -1 - З якого елемента починати.

Давайте розглянемо приклад використання:

1	2	3	4	5	6	7	8	9	10	11	12	13	14
2
3
4

У цьому прикладі з використанням псевдокласу: nth-child ми вибрали і стилізували кожен четвертий осередок таблиці ( ) усередині рядка, починаючи з другого осередку таблиці. Результат нашого прикладу:

basicweb.ru

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

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

Ul li:nth-child(3n+3) ( color: #ccc; )

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

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

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

Ul li:nth-child(5) ( color: #ccc; )

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

(3 x 0) + 3 = 3 = 3-ий елемент (3 x 1) + 3 = 6 = 6-ий елемент (3 x 2) + 3 = 9 = 9-ий елемент і т.д.

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

(2 x 0) + 1 = 1 = перший елемент (2 x 1) + 1 = 3 = третій елемент (2 x 2) + 1 = 5 = 5-ий елемент і т.д.

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

(3 x 0) + 0 = 0 = немає відповідності (3 x 1) + 0 = 3 = третій елемент (3 x 2) + 0 = 6 = 6-ий елемент і т.д.

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

(4 x 0) - 1 = -1 = немає відповідності (4 x 1) - 1 = 3 = третій елемент (4 x 2) - 1 = 7 = 7-ий елемент і т.д.

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

0 + 3 = 3 = 3-ий елемент -1 + 3 = 2 = 2-ий елемент -2 + 3 = 1 = 1-ий елемент -3 + 3 = 0 = немає відповідності

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

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

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

Ну і насамкінець

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

www.css-tricks.ru

Значення

Значення	Опис
Число	Позитивне число з 1. Задає номер елемента, якого ми хочемо звернутися. Нумерація елементів починається з першого.
odd	Непарні елементи.
even	Чітні елементи.
Вираз	Можна складати спеціальні вирази з літерою n, яка позначає всі цілі числа від нуля (не від одиниці!)до нескінченності. Так, 2n означає всі парні числа (починаючи з другого). Як це зрозуміти? Підставляємо в n послідовно числа від 0 і так далі: якщо n = 0, то 2n дасть 0 такого елемента немає ( нумерація елементів із 1!), якщо n = 1, то 2n дасть 2 другий елемент, якщо n = 2, 2n дає 4 - четвертий елемент. Якщо написати 3n – це буде кожен третій елемент (починаючи з третього!), і таке інше.

Приклади

Приклад

У даному прикладі ми зробимо червоного кольору, який є 4-м нащадкомсвого батька (4-им всередині ol):

Результат виконання коду:

Приклад

Нині червоними зробимо все парні li:

Результат виконання коду:

Приклад

Нині червоними зробимо все непарні li:

Результат виконання коду:

Приклад

Нині червоними зробимо кожну третю li (починаючи з третьої):

Результат виконання коду:

Приклад

У селекторі можна вказати діапазон елементів. Допустимо, у вас є список із 20 елементів і потрібно вибрати елементи з 7 по 14 включно. Це можна зробити так:

Результат виконання коду:

code.mu

Syntax

The nth-child pseudo-class specified with a single argument, яких represents the pattern for matching elements.

Keyword values

odd Represents elements whose numeric position in series of siblings is odd: 1, 3, 5, etc. even Represents elements whose numeric position in a series siblings is even: 2, 4, 6, etc.

Functional notation

Represents elements які numerické position в series of siblings matches the pattern An+B , для every positive integer або zero value of n . index of the first element is 1 . The values ​​A and B must both be s.

Formal syntax

:nth-child( [ of ]?)

where
= even odd
=

where
=

where
=
= ">" " " "~" " "

where
=

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

Ul li:nth-child(3n+3) ( color: #ccc; )

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

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

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

Ul li:nth-child(5) ( color: #ccc; )

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

(3 x 0) + 3 = 3 = 3-ий елемент (3 x 1) + 3 = 6 = 6-ий елемент (3 x 2) + 3 = 9 = 9-ий елемент і т.д.

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

(2 x 0) + 1 = 1 = перший елемент (2 x 1) + 1 = 3 = третій елемент (2 x 2) + 1 = 5 = 5-ий елемент і т.д.

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

(3 x 0) + 0 = 0 = немає відповідності (3 x 1) + 0 = 3 = третій елемент (3 x 2) + 0 = 6 = 6-ий елемент і т.д.

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

(4 x 0) - 1 = -1 = немає відповідності (4 x 1) - 1 = 3 = третій елемент (4 x 2) - 1 = 7 = 7-ий елемент і т.д.

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

0 + 3 = 3 = 3-ий елемент -1 + 3 = 2 = 2-ий елемент -2 + 3 = 1 = 1-ий елемент -3 + 3 = 0 = немає відповідності

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

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

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

Ну і насамкінець

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

Опис

Псевдоклас :nth-child використовується для додавання стилю елементів на основі нумерації в дереві елементів.

Синтаксис

елемент:nth-child(odd | even |<число> | <выражение>) {...}

Значення

odd Усі непарні номери елементів. even Усі парні номери елементів. Порядковий номер дочірнього елемента щодо свого батька. Нумерація починається з 1, це буде перший елемент у списку. вираз Задається як an+b , де a і b цілі числа, а n - лічильник, який автоматично набуває значення 0, 1, 2...

Якщо a дорівнює нулю, воно не пишеться і запис скорочується до b . Якщо b дорівнює нулю, воно також не вказується і вираз записується у формі an . a і b може бути негативними числами, у разі знак плюс змінюється на мінус, наприклад: 5n-1.

За рахунок використання негативних значень a і b деякі результати можуть вийти негативними або рівними нулю. Однак на елементи впливають лише позитивні значення через те, що нумерація елементів починається з 1.

У табл. 1 наведено деякі можливі вирази та ключові слова, а також зазначено, які номери елементів будуть задіяні.

HTML5 CSS3 IE Cr Op Sa Fx

	2134	2135	2136	2137	2138
Нафта	16	34	62	74	57
Золото	4	69	72	56	47
Дерево	7	73	79	34	86
Камені	23	34	88	53	103

У цьому прикладі псевдоклас :nth-child використовується зміни стилю першого рядка таблиці, і навіть виділення кольором всіх парних рядків (рис. 1).

Facebook

Twitter

Вконтакте

Google+

IPad