Структурні та Функціональні Псевдокласи

Ці псевдокласи відносяться до позиції елемента в ієрархічній структурі документа.

Псевдоклас first-child

Псевдоклас :first-child націлений на елемент, який є першим нащадком свого батька, незалежно від його тегу або назви класу. Розглянемо наступний приклад для пояснення. У нас є набір елементів, і лише для першого елемента (перший елемент <li>) ми хочемо встановити його властивість color у значення blue.

Ми бачимо, що був виділений перший елемент, і тільки для нього ми змінюємо властивість color.

Псевдоклас last-child

Псевдоклас :last-child націлений на останній дочірній клас свого батька, дозволяючи нам змінювати будь-які його властивості. Розглянемо приклад, щоб проілюструвати, як можна ефективно використовувати цей псевдоклас.

Псевдоклас nth-child

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

• a - період циклу.
• n - лічильник циклу, що починається з 0 і збільшується на 1 з кожною ітерацією.
• b - зміщення, що впливає на початкову точку вибору.

Розглянемо кілька типових селекторів.

Примітка

Нам не потрібно запам'ятовувати всі селектори. Ми завжди можемо знайти їх у Google.

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

Псевдоклас :not() вибирає елементи, які не відповідають заданому селектору. Наприклад, :not(p) виділить усі елементи, окрім елементів <p>. Давайте розглянемо кілька прикладів: