Структурні псевдокласи

Структурні псевдокласи - це спеціальні класи, які дозволяють вибирати елементи на основі їхньої позиції або структури в DOM-дереві (Document Object Model). Вони дозволяють вам вибирати елементи на основі їхніх зв'язків з іншими елементами, наприклад, перший, останній, парний, непарний елементи тощо.

Ці псевдокласи працюють тільки для колекції дочірніх елементів, тобто таких, які мають спільного батька. Якщо іде подвійна вкладеність, то на внутрішні елементи це правило не спрацює.

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

<ul class="list">
  <li class="list-item">
    <img srs="/img/image-1.jpg" alt="object-1" class="list-image" />
  </li>
  <li class="list-item">
    <img srs="/img/image-2.jpg" alt="object-2" class="list-image" />
  </li>
</ul>

Елементи списку з класом list-item - це сусіди, бо мають спільного батька list.

Зображення з класом list-image - це не сусіди, бо не мають спільного батька, тому для них структурні псевдокласи застосувати не можна.

Синтаксис псевдокласу

some-selector {
/*Опис стилів*/
}

some-selector:pseudo-class {
/*Опис стилів*/
}

Псевдокласи :first-child і :last-child

Псевдокласи :first-child і :last-child Вибирають відповідно перший і останній дочірній елементи батьківського елемента.

Наприклад, ми хочемо у списку зробити заливку фону у першого і останнього елементів. Якщо клас для елементів списку назвемо list-item, то псевдокласи матимуть такий вигляд

.list-item:first-child {
  background-color: yellow;
}

.list-item:last-child {
   background-color: orange;
}

Псевдоклас :not(selector)

Псевдоклас :not(selector) - вибирає елементи, які не відповідають заданому селектору, тобто не збігаються з умовою вказаною в дужках.

Наприклад задамо заливку фону всім елементам списку крім останнього.

.list-item:not(:last-child) {
  background-color: yellow;
}

У дужках можна вказувати не тільки псевдоклас, але і клас.

ul li:not(.special) {
  /* Стилі для всіх елементів списку, які не мають класу .special */
}

Псевдоклас :nth-child(an+b)

Псевдоклас :nth-child(an+b) дозволяє вибирати елементи, які мають певну позицію відносно їхніх батьківських елементів у DOM-дереві. Вираз an+b є формулою, де n - це номер порядку елемента, починаючи з 0, та a і b - це цілі числа. За допомогою цього псевдокласу можна вибирати елементи, які мають певний порядковий номер у батьківському елементі та можна використовувати для вибору елементів, які відповідають певній арифметичній послідовності.

a - період циклу.

n - лічильник циклу. Починається з нуля і збільшується на одиницю на кожній ітерації.

b - зміщення.

Розглянемо на прикладі: Припустимо, що a =3, а b=2. Тоді розрахуємо арифметичну послідовність елементів, до яких застосується стиль :nth-child(3n+2)

// При n=0
3n+2 = 3*0 + 2 = 2

// При n=1
3n+2 = 3*1 + 2 = 5

// При n=2
3n+2 = 3*2 + 2 = 8

// І так далі. Тобто кожен третій елемент починаючи з другого.

.list-item:nth-child(3n+2) {
  background-color: orange;
}

Елемент з порядковим номером n

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

Якщо a=0, то яким би не було значення n, результат буде один - тобто число вказане в формулі як b. Тому достатньо в дужках просто вказати номер елемента.

Наприклад, потрібно обрати 2 елемент.

.list-item:nth-child(2) {
  background-color: orange;
}

Парні елементи

Для вибору всіх парних елементів можна використати загальну формулу 2n або її псевдонім - зарезервоване слово even.

.list-item:nth-child(2n) {
  background-color: orange;
}

або

.list-item:nth-child(even) {
  background-color: orange;
}

Непарні елементи

Для вибору всіх непарних елементів можна використати загальну формулу 2n+1 або її псевдонім - зарезервоване слово odd.

.list-item:nth-child(2n+1) {
  background-color: orange;
}

або

.list-item:nth-child(odd) {
  background-color: orange;
}

Від N-го елемента

Візьмемо загальну формулу an+b. Тоді, якщо a=1, у нас будуть обиратися всі елементи починаючи з b.

.list-item:nth-child(n+4) {
  background-color: orange;
}

Візьмемо загальну формулу an+b. Тоді, якщо a=-1, формула буде така: b-n. У нас будуть обиратися всі елементи починаючи з першого і до b включно. Але в формулі все-таки потрібно дотримуватися порядку: -n+b, де b - число до якого вибрати елементи.

.list-item:nth-child(-n+4) {
  background-color: orange;
}

Виходячи із загальної формули an+b ми можемо вибрати кожен a-ий елемент починаючи з b-го.

Наприклад: a=3, b=1 - кожен третій елемент починаючи з першого (1, 4, 7...)

Якщо b задати рівним нулю, то перший вибраний елемент буде за порядком якраз b, бо елемента з нульовим номером немає.

Наприклад: a=4, b=0 - кожен четвертий елемент починаючи з четвертого (4, 8, 12...)

Псевдоклас :nth-last-child(an+b)

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

N-й елемент з кінця

Наприклад потрібно вибрати 2-й елемент з кінця.

.list-item:nth-last-child(2) {
  background-color: orange;
}

До N-го елемента рахуючи з кінця

За аналогією, з формули an+b видно - якщо до якогось числа, то формула буде -a+b, а щоб рахувалося з кінця, то оберемо псевдоклас :nth-last-child.

.list-item:nth-last-child(-n +4) {
  background-color: orange;
}

Додаткові псевдокласи

Ці псевдокласи застосовують рідко або у дуже специфічних випадках.

:first-of-type - вибирає перший селектор цього типу.

:last-of-type - вибирає останній селектор цього типу.

:only-of-type - вибирає елемент, який є єдиною дитиною такого типу в колекції сусідів.

:nth-of-type(an+b) - вибирає номер селектора, використовуючи формулу an+b.

:nth-last-of-type(an+b) - аналог :nth-of-type() з відмінністю у тому, що відлік ведеться з кінця колекції (останнього елемента).

:only-child - вибирає елемент, який є єдиною дитиною з таким селектором в колекції сусідів.

:empty - вибирає порожні елементи, тобто без нащадків і тексту.

PreviousТипи елементів NextFlexbox

Last updated 1 year ago