Знання комбінаторів допоможе нам писати більш ефективний та зрозумілий CSS-код, що забезпечить більшу легкість у підтримці та розширенні коду.
У цьому уроці ми розглянемо основні типи комбінаторів CSS та навчимося застосовувати їх в практиці. Приготуйте свої редактори коду та почнемо!
Селектор CSS може містити більше одного простого селектора. Між простими селекторами ми можемо включити комбінатор.
Комбінатори CSS - це спосіб визначення відносин між елементами на сторінці. Комбінатори використовуються для вибору елементів на основі їх структури та відносин з іншими елементами на сторінці.
Основні типи комбінаторів CSS:
У CSS є чотири різні комбінатори:
- селектор нащадка (пробіл)
- дочірній селектор (>)
- селектор сусіднього брата (+)
- загальний селектор братів і сестер (~)
Але ми сьогодні розглянемо п'ять комбінаторів, які найчастіше зустрічаються.
- Пробіл (space) - вибір елементів, які є нащадками іншого елемента. Наприклад, div p вибере всі елементи <p>, які знаходяться всередині елементів <div>.
- > - вибір елементів, які є безпосередніми нащадками іншого елемента. Наприклад, div > p вибере всі елементи <p>, які є безпосередніми нащадками елементів <div>.
- + - вибір елементів, які знаходяться безпосередньо після іншого елемента. Наприклад, div + p вибере перший елемент <p>, який знаходиться безпосередньо після елемента <div>.
- ~ - вибір елементів, які знаходяться після іншого елемента, але не обов'язково безпосередньо. Наприклад, div ~ p вибере всі елементи <p>, які знаходяться після елемента <div>.
- , - вибір декількох елементів з однаковими стилізаціями. Наприклад, h1, h2, h3 вибере всі елементи <h1>, <h2> та <h3> на сторінці.
Ці комбінатори можна поєднувати між собою та з іншими вибірками елементів, щоб створювати складніші CSS-селектори для вибору конкретних елементів на сторінці.
Приклади застсування Основних типів комбінаторів CSS:
Основні типи комбінаторів CSS дозволяють вибирати елементи на основі їх взаємного розташування відносно інших елементів. Ось кілька прикладів застосування основних типів комбінаторів CSS:
Селектор за нащадком (Descendant selector):
Селектор за нащадком використовується для вибору елементів, які знаходяться всередині іншого елементу. Наприклад, якщо ми хочемо вибрати всі елементи "p", які знаходяться всередині елемента "div", ми можемо використовувати наступний код:
Приклад селектора за нащадком (Descendant selector):
div p {
/* CSS стилі для всіх елементів "p", які знаходяться всередині елемента "div" */
}Селектор дочірнього елемента (Child selector):
Селектор дочірнього елемента використовується для вибору елементів, які є безпосередніми дітьми іншого елемента. Наприклад, якщо ми хочемо вибрати всі елементи "a", які знаходяться безпосередньо всередині елемента "nav", ми можемо використовувати наступний код:Приклад селектора дочірнього елемента (Child selector):
nav > a {
/* CSS стилі для всіх елементів "a", які є безпосередніми дітьми елемента "nav" */
}Селектор сусідніх елементів (Adjacent sibling selector):
Селектор сусідніх елементів використовується для вибору елементів, які знаходяться безпосередньо поруч з іншим елементом того ж рівня вкладеності. Наприклад, якщо ми хочемо вибрати всі елементи "p", які безпосередньо наступають за елементом "h1", ми можемо використовувати наступний код:
Приклад селектора сусідніх елементів (Adjacent sibling selector):
/h1 + p {
/* CSS стилі для всіх елементів "p", які безпосередньо наступають за елементом "h1" */
}Селектор загальних елементів (General sibling selector):
Селектор загальних елементів (General sibling selector) використовується для вибору всіх елементів, які є на одному рівні з іншим елементом та йдуть після нього. Цей селектор позначається символом "~" (тильда) і застосовується до другого елемента в парі.
Наприклад, якщо ми маємо HTML-код з двома елементами <p>, які йдуть один за одним:
Приклад селектора загальних елементів (General sibling selector):
p ~ p {
color: red;
}У цьому прикладі, всі <p> елементи, що йдуть після першого <p> елемента будуть мати червоний колір тексту.
Підсумок:
Під час цього заняття ми розглянули основні комбінатори CSS, які дозволяють нам вибирати та стилізувати елементи на веб-сторінці на основі їх взаємозв'язків та позицій відносно інших елементів.
Ми ознайомилися з чотирма типами комбінаторів: комбінатор нащадків (descendant combinator), комбінатор дочірніх елементів (child combinator), комбінатор сусідніх елементів (adjacent sibling combinator) та комбінатор загальних елементів (general sibling combinator).
Знання комбінаторів є важливим для написання більш ефективного та зрозумілого CSS-коду. За допомогою комбінаторів ми можемо зменшити кількість потрібного CSS-коду та полегшити розуміння структури сторінки.
Не забувайте, що знання основних комбінаторів - це тільки початок шляху до майстерності в CSS. Розуміння більш складних комбінаторів та їх поєднань допоможе вам створювати більш складні та гнучкі розмітки сторінок.
Тестування для самоконтролю:
Використані джерела:
Офіційна документація CSS на MDN Web Docs: https://developer.mozilla.org/en-US/docs/Web/CSS
W3Schools - CSS Combinators: https://www.w3schools.com/css/css_combinators.asp
CSS Selectors Level 3 Specification - Combinators: https://www.w3.org/TR/css3-selectors/#combinators
З повагою, Юрій Чернієвський! Керівник гуртка "WEB-Miditaur" науково – технічного напряму «WEB технології» ЦДЮТ Краснопільської селищної ради. Бакалавр, прикладна математика за спеціальним напрямом інформатика, Спеціаліст - інформатика, математик - програміст.
Мої побажання
Будь допитливим, досліджуй глибини понять, адже лише це і допомагає розвиватися! На цьому сайті формується сприятливий простір для вивчення web. Рівень твого самостійного заглиблення в певні питання сьогодні будуть відповідати рівню твоєї компетенції з даного питання в майбутньому. Єдиним фактором, який має значення, є твоя власна здатність і бажання вчитися. Немає сенсу порівнювати свій прогрес з іншими, оскільки цей досвід здебільшого суб’єктивний. Поділіться посиланням у соціальних мережах за допомогою кнопок, розміщених нижче та підпишіться на блог, щоб першими отримувати нові публікації корисного навчального контенту!
Коментуй публікацію, пиши свої враження, залишай питання в коментарях, якщо якісь моменти з публікації залишилися не зрозумілими!вихованцям
0 Коментарів Підписатися на цей блог