Вивчайте Використання Структурних та Функціональних Псевдокласів

Псевдокласи дозволяють точно визначати елементи на основі їхнього порядку в контейнері. Розглянемо деякі з найпоширеніших псевдокласів.

:first-child

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

index.html

styles.css

Вивід

Було вибрано лише перший елемент FAQ, і до нього застосовано певні стилі.

:last-child

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

index.html

styles.css

Вивід

:nth-child

Псевдоклас :nth-child дозволяє вибирати елементи на основі їхньої позиції серед сусідніх елементів. Можна почати з простого вибору, вказавши номер. Наприклад:

index.html

styles.css

Вивід

Акцентні стилі були застосовані лише до вибраних елементів (2-го та 3-го).

Розширений :nth-child

Для більш складних випадків можна використовувати формулу an+b, щоб вибирати кілька елементів залежно від їхньої позиції. Ось як працює ця формула:

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

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

/* Selects every second element (2, 4, 6, ...) */
.item:nth-child(2n) {
  /* Styles for every second element */
}

/* Selects the first three elements */
.item:nth-child(-n + 3) {
  /* Styles for the first three elements */
}

/* Selects all odd elements */
.item:nth-child(odd) {
  /* Styles for all odd elements */
}

/* Selects every second child starting from the first (1, 3, 5, ...) */
.item:nth-child(2n+1) {
  /* Styles for the last three elements */
}

Примітка

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

:not()

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

index.html

index.css

1. Який псевдоклас можна використати для вибору першого елемента в наборі елементів?

2. Для чого використовується псевдоклас `nth-child`?

3. Як працює псевдоклас `last-child`?

Все було зрозуміло?

Дякуємо за ваш відгук!

Секція 3. Розділ 5

Запитати АІ

Запитайте про що завгодно або спробуйте одне із запропонованих запитань, щоб почати наш чат

Awesome!

Completion rate improved to 2.56

Свайпніть щоб показати меню

:first-child

index.html

styles.css

Вивід

Було вибрано лише перший елемент FAQ, і до нього застосовано певні стилі.

:last-child

index.html

styles.css

Вивід

:nth-child

index.html

styles.css

Вивід

Акцентні стилі були застосовані лише до вибраних елементів (2-го та 3-го).

Розширений :nth-child

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

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

/* Selects every second element (2, 4, 6, ...) */
.item:nth-child(2n) {
  /* Styles for every second element */
}

/* Selects the first three elements */
.item:nth-child(-n + 3) {
  /* Styles for the first three elements */
}

/* Selects all odd elements */
.item:nth-child(odd) {
  /* Styles for all odd elements */
}

/* Selects every second child starting from the first (1, 3, 5, ...) */
.item:nth-child(2n+1) {
  /* Styles for the last three elements */
}

Примітка

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

:not()

index.html

index.css

1. Який псевдоклас можна використати для вибору першого елемента в наборі елементів?

2. Для чого використовується псевдоклас `nth-child`?

3. Як працює псевдоклас `last-child`?

Все було зрозуміло?

Дякуємо за ваш відгук!

Секція 3. Розділ 5

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

:first-child

Вивід

:last-child

Вивід

:nth-child

Вивід

Розширений :nth-child

:not()

1. Який псевдоклас можна використати для вибору першого елемента в наборі елементів?

2. Для чого використовується псевдоклас nth-child?

3. Як працює псевдоклас last-child?

Awesome!

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

:first-child

Вивід

:last-child

Вивід

:nth-child

Вивід

Розширений :nth-child

:not()

1. Який псевдоклас можна використати для вибору першого елемента в наборі елементів?

2. Для чого використовується псевдоклас nth-child?

3. Як працює псевдоклас last-child?

2. Для чого використовується псевдоклас `nth-child`?

3. Як працює псевдоклас `last-child`?

2. Для чого використовується псевдоклас `nth-child`?

3. Як працює псевдоклас `last-child`?