CSSBốn combinator mô tả quan hệ giữa hai element:
html
<div>
<p>A</p> <!-- con trực tiếp -->
<section>
<p>B</p> <!-- cháu -->
</section>
<h2>C</h2>
<p>D</p> <!-- anh em ngay sau h2 -->
<p>E</p> <!-- anh em sau h2, không liền kề -->
</div>css
div p { } /* A, B, D, E — mọi con cháu */
div > p { } /* A, D, E — chỉ con TRỰC TIẾP */
h2 + p { } /* D — anh em LIỀN NGAY SAU */
h2 ~ p { } /* D, E — mọi anh em SAU nó */| Ký hiệu | Tên | Quan hệ |
|---|---|---|
| khoảng trắng | descendant | con cháu bất kỳ cấp |
> | child | con trực tiếp |
+ | adjacent sibling | anh em kế ngay sau |
~ | general sibling | mọi anh em phía sau |
Dùng thực tế nhiều nhất là + cho khoảng cách giữa các phần tử liên tiếp:
css
.list > * + * { margin-top: 12px; } /* mọi phần tử trừ cái đầu */Lưu ý: + và ~ chỉ nhìn về phía sau.
Không có combinator "anh em phía trước" — muốn style element đứng trước thì phải dùng :has() (h2:has(+ p)).