CSS element1+element2 — сусідній селектор
Комбінатор element1 + element2 обирає element2, який стоїть ОДРАЗУ після element1 на тому самому рівні вкладеності.
Загальний опис
автор: NagarD
Синтаксис
element + element {
css declarations;
}Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 1 | 1 | 1 | 3.5 | 12 | 7 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 4.4 | 18 | 4 | 1 |
Приклади
+ запропонувати свій приклад у пісочниці
Селектор div + p обирає лише той <p>, що стоїть у розмітці одразу після <div> — сусідні далі не зачіпаються.
HTML
<div>Блок div</div>
<p>Цей абзац іде одразу за div — він жовтий.</p>
<p>А цей стоїть другим після div — правило його не зачіпає.</p>CSS
div + p {
background-color: yellow;
}Чотири комбінатори на одній розмітці: видно, що div p бере вміст, а div + p — сусіда.
HTML
<div class="box">
<p>Абзац ВСЕРЕДИНІ блоку</p>
</div>
<p>Одразу після блоку — сусід</p>
<p>Наступний абзац на тому ж рівні</p>CSS
body {
font: 15px/1.5 system-ui, sans-serif;
}
.box {
padding: .5rem .75rem;
border: 1px dashed #94a3b8;
}
/* всередині блоку */
.box p {
color: #2563eb;
}
/* одразу після блоку — рівно один */
.box + p {
background: #fef9c3;
}
/* усі наступні на тому ж рівні */
.box ~ p {
border-left: 3px solid #f59e0b;
padding-left: .5rem;
}Коментарі
Коментарів ще немає — будьте першим!