6. Фільтри child

Фільтри child використовуються для того щоб відібрати дочірні елементи (вкладені елементи або нащадки) за певними правилами. Порядковий номер елемента (index) починається з "1". Вибірка йде для кожного батьківського елемента не залежно від рівня його розташування.

:first-child - вибір першого дочірнього елементу для визначених блоків
:last-child - вибір останього дочірнього елементу для визначених блоків
:only-child - вибір дочірнього елементу для визначених блоків, який є єдиним
:nth-child(even) - вибір парного дочірнього елементу для визначених блоків
:nth-child(odd) - вибір непарного дочірнього елементу для визначених блоків
:nth-child(index) - вибір дочірнього елементу для визначених блоків по index (нумерація блоків починається з 1)
:nth-child(2n+1) - вибір дочірнiх елементів по формулі, n приймає значення 0, 1, 2 і т.д.

Приклади

.div7
1
2
3
4
5
6
7
8
9
.dv7
1
2
3
4
5
6
7
8
9
1. - вибір першого дочірнього елементу для визначених блоків
2. - вибір останього дочірнього елементу для визначених блоків
3. - вибір дочірнього елементу для визначених блоків, який є єдиним
4. - вибір парного дочірнього елементу для визначених блоків
5. - вибір непарного дочірнього елементу для визначених блоків
6. - вибір дочірнього елементу для визначених блоків по index (нумерація блоків починається з 1)
/*тільки вибір */
$('.dv7 div:first-child')
$('.dv7 div:last-child')
$('.dv7 div:only-child')
$('.dv7 div:nth-child(even)')
$('.dv7 div:nth-child(odd)')
$('.dv7 div:nth-child(2)')/* index=2 */

:nth-child(2n+1) - вибір дочірнiх елементів по формулі, n приймає значення 0, 1, 2 і т.д.

.dv7
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
У формулу замість n підставляємо числа 0, 1, 2, 3 i т.д.

(2n+1) - виберуться блоки 1, 3, 5, 7, 9, 11, 13, 15
(3n+1) - виберуться блоки 1, 4, 7, 10, 13
(5n-1) - виберуться блоки 4, 9, 14
(6n+2) - виберуться блоки 2, 8, 14
/*тільки вибір */
$('.dv7 div:nth-child(2n+1)')
$('.dv7 div:nth-child(3n+1)')
$('.dv7 div:nth-child(5n-1)')
$('.dv7 div:nth-child(6n+2)')

далі ✏
Ігор Ка