* div
<div>
nằm ở bất kỳ đâu trong tài liệu, bất kể chúng là con của phần tử nào.* div { background-color: lightblue; }
Trong ví dụ trên, tất cả các phần tử <div>
sẽ có màu nền là lightblue
.p
<p>
trong tài liệu.p { font-size: 16px; }
Trong trường hợp này, tất cả các đoạn văn <p>
sẽ có kích thước font là 16px
.* div p
<p>
nằm bên trong bất kỳ phần tử <div>
nào, bất kể chúng là con hoặc cháu của <div>
.* div p { color: green; }
Trong ví dụ này, tất cả các đoạn văn <p>
bên trong bất kỳ phần tử <div>
nào sẽ có màu chữ là green
.* div ~ p
<p>
đứng sau bất kỳ phần tử <div>
nào và nằm cùng cấp với <div>
. Đây là selector “tiền anh” (general sibling combinator).* div ~ p { margin-top: 10px; }
Trong ví dụ này, tất cả các đoạn văn <p>
đứng sau phần tử <div>
trong cùng một cấp sẽ có khoảng cách phía trên là 10px
.* div + p
<p>
ngay sau ngay sau một phần tử <div>
nào đó. Đây là selector “em” (adjacent sibling combinator).* div + p { font-weight: bold; }
Trong ví dụ này, phần tử <p>
ngay sau phần tử <div>
sẽ có chữ đậm.* div > p
<p>
là con trực tiếp của bất kỳ phần tử <div>
nào. Đây là selector “con” (child combinator).* div > p { font-style: italic; }
Trong trường hợp này, tất cả các đoạn văn <p>
là con trực tiếp của phần tử <div>
sẽ có kiểu chữ nghiêng.