Псевдокласи структури

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

Псевдокласи структури в CSS дозволяють вибирати та стилізувати елементи на основі їхнього розташування в дереві документа. Це особливо корисно для створення більш точних і деталізованих стилів, які застосовуються до певних елементів. Розглянемо псевдокласи :first-child, :last-child, :nth-child та :nth-of-type.

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

Синтаксис:

    
      селектор:first-child {
        властивості: значення;
      }
    
  

Приклад використання

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

    
      /* Стилізація першого елемента списку */

      li:first-child {
        font-weight: bold;
        color: red;
      }

      /* Стилізація першого параграфа в div */

      div p:first-child {
        text-transform: uppercase;
      }
    
  

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

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

Синтаксис:

    
      селектор:last-child {
        властивості: значення;
      }
    
  

Приклад використання

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

    
      /* Стилізація останнього елемента списку */

      li:last-child {
        font-style: italic;
        color: blue;
      }

      /* Стилізація останнього параграфа в div */

      div p:last-child {
        text-decoration: underline;
      }
    
  

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

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

Синтаксис:

    
      селекторnth-child(аргумент) {
        властивості: значення;
      }
    
  

Аргументи:

• Число: вибирає елемент на зазначеній позиції
• Ключові слова: odd (непарні) та even (парні)
• Вираз: формат an+b, де a і b — числа

Приклад 1: Вибір непарних елементів

У цьому прикладі стилізуються всі непарні елементи списку, задаючи їм світло-сірий фон:

    
      /* Стилізація непарних елементів списку */

      li:nth-child(odd) {
        background-color: #f0f0f0;
      }
    
  

Приклад 2: Вибір елементів на певній позиції

У цьому прикладі третій елемент списку виділяється жирним шрифтом і зеленим кольором:

    
      /* Стилізація третього елемента списку */

      li:nth-child(3) {
        font-weight: bold;
        color: green;
      }
    
  

Приклад 3: Використання виразів

У цьому прикладі стилізуються кожен другий елемент, починаючи з першого, задаючи їм світло-сірий фон:

    
      /* Стилізація кожного другого елемента, починаючи з першого */

      li:nth-child(2n+1) {
        background-color: #e0e0e0;
      }
    
  

3.4 Псевдоклас :nth-of-type

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

Синтаксис:

    
      селектор:nth-of-type(аргумент) {
        властивості: значення;
      }
    
  

Аргументи:

• Число: вибирає елемент на зазначеній позиції серед елементів того ж типу
• Ключові слова: odd (непарні) та even (парні)
• Вираз: формат an+b, де a і b — числа

Приклад 1: Вибір парних параграфів

У цьому прикладі стилізуються всі парні параграфи, задаючи їм світло-сірий фон:

    
      /* Стилізація парних параграфів */

      p:nth-of-type(even) {
        background-color: #d0d0d0;
      }
    
  

Приклад 2: Вибір елементів на певній позиції серед одного типу

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

    
      /* Стилізація другого заголовка h2 */

      h2:nth-of-type(2) {
        font-size: 2em;
        color: orange;
      }
    
  

Приклад 3: Використання виразів

У цьому прикладі стилізуються кожен третій елемент списку, починаючи з другого, задаючи їм світло-сірий фон:

    
      /* Стилізація кожного третього елемента списку, починаючи з другого */

      li:nth-of-type(3n+2) {
        background-color: #c0c0c0;
      }