Назад Вперед Зміст

Використання контекстних селекторів для вкладених списків

При вкладенні списків виникають складнощі з вказанням типу нумерації

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

Зробимо зовнішню нумерацію арабськими цифрами, другий рівень — малими латинськими літерами, третій рівень —римськими цифрами .

Вкладені списки

Приклад вкладених списків з різними типами нумерації:

<ol type="I">
  <li>Розділ 1
    <ol type="A">
      <li>Підрозділ A</li>
      <li>Підрозділ B</li>
    </ol>
  </li>
</ol>

Контекстні селектори у CSS

1. Теорія

Селектор нащадків (пробіл) вибирає всі елементи всередині батьківського, на будь-якій глибині:

ul li {
  color: red;
}

Селектор дочірніх елементів (>) вибирає лише безпосередніх дітей:

ul > li {
  color: green;
}

Суміжний брат (+) вибирає елемент, що йде одразу після вказаного:

h2 + ul {
  border: 1px solid black;
}

Усі наступні брати (~) вибирає всі наступні елементи з таким самим батьком:

h2 ~ ul {
  background: yellow;
}
---

2. Приклад: Вкладені списки

<ol>
  <li>Зима
    <ol>
      <li>Грудень
        <ul>
          <li>Миколая</li>
          <li>Новий рік</li>
        </ul>
      </li>
      <li>Січень</li>
      <li>Лютий</li>
    </ol>
  </li>
  <li>Весна</li>
</ol>

CSS

ol li ul {
  list-style-type: square;
  color: blue;
}

ol > ol {
  border: 2px dashed green;
}

ol > li {
  font-weight: bold;
}
---

3. Завдання

Рівень A (базовий)

1. Зміни стиль так, щоб усі <li> у <ul> мали зелений колір.

2. Зроби маркери у <ul> круглими.

Рівень B (середній)

1. Зроби жирними лише безпосередніх дітей першого <ol>.

2. Додай рамку тільки для другого рівня <ol> (вкладених всередині <li>).

Рівень C (просунутий)

1. Використовуючи суміжні селектори, зміни колір <ul>, які йдуть після <li> з текстом «Грудень».

2. Додай фоновий колір для всіх <ul>, що йдуть після будь-якого <h2> у документі.

---

4. Міні-тести

1. Який селектор вибирає лише безпосередніх дітей?

2. Що вибирає селектор h2 ~ ul?

---

Відповіді: 1 – B, 2 – C

Назад Вперед Зміст