Combinator trong CSS
Combinator (tổ hợp) thể hiện mối quan hệ giữa các selector, cho phép kết hợp các selector lại với nhau dưới dạng các chuỗi ký tự.
Trong CSS, có 4 combinator quen thuộc như sau:
- Descendant combinator (space): Select những phần tử là con cháu của một phần tử khác.
- Child combinator (>): Select những phần tử là con của một phần tử khác.
Chú ý ở đây "con cháu" được dùng để chỉ phần tử nằm trong phần tử khác, còn "con" là chỉ phần tử nằm trực tiếp ngay bên trong của phần tử khác. Ví dụ như <div><span><p>example</p><span></div> thì chỉ có span là "con" của div, còn cả span và p đều là "con cháu" của div.
- Adjacent sibling combinator (+): Select phần tử nằm liền kề và ngang hàng với phần tử khác (các phần tử "anh em" kề nhau).
- General sibling combinator (~): Select phần tử ngang hàng với phần tử khác (các phần tử "anh em").
Descendant combinator
Descendant combinator (space) cho phép kết hợp những phần tử là con cháu của một phần tử khác.
div p {
background-color: yellow;
}
Ở đây, phần tử con cháu là thẻ p, phần tử thứ nhất là div. Thẻ p nằm ở trong thẻ div sẽ có background-color: yellow.
Ví dụ:
<!DOCTYPE html>
<html>
<head>
<style>
div p {
background-color: yellow;
}
</style>
</head>
<body>
<h2>Ví dụ Descendant combinator</h2>
<div>
<p>Đoạn 1 nằm trong div.</p>
<p>Đoạn 2 nằm trong div.</p>
<span><p>Đoạn 3 nằm trong div.</p></span>
</div>
<p>Đoạn 4 không nằm trong div.</p>
<p>Đoạn 5 không nằm trong div.</p>
</body>
</html>
Child combinator
Child combinator (>) cho phép kết hợp những phần tử là con "trực tiếp" của một phần tử khác (như đã giải thích ở trên).
div > p {
background-color: yellow;
}
Ở đây, phần tử con là thẻ p, phần tử thứ nhất là div. Thẻ p nằm ở trong thẻ div sẽ có background-color: yellow, còn các thẻ khác nằm trong p thì không.
Ví dụ:
<!DOCTYPE html>
<html>
<head>
<style>
div > p {
background-color: yellow;
}
</style>
</head>
<body>
<h2>Ví dụ Descendant combinator</h2>
<div>
<p>Đoạn 1 nằm trong div.</p>
<p>Đoạn 2 nằm trong div.</p>
<span><p>Đoạn 3 nằm trong div.</p></span>
</div>
<p>Đoạn 4 không nằm trong div.</p>
<p>Đoạn 5 không nằm trong div.</p>
</body>
</html>
Adjacent sibling combinator
Adjacent sibling combinator (+) cho phép chọn những phần tử nằm liền kề và ngang hàng với phần tử được chỉ định (các phần tử "anh em" kề nhau).
div + p {
background-color: yellow;
}
Ở đây, phần tử p nằm liền kề và ngang hàng với div sẽ có background-color: yellow, còn các thẻ p khác nằm trong div hoặc thẻ p ngang hàng nhưng không liền kề với div thì không.
Ví dụ:
<!DOCTYPE html>
<html>
<head>
<style>
/* Viết bởi Quantrimang.com */
div + p {background-color: yellow;
}
</style>
</head>
<body>
<h2>Ví dụ Adjacent sibling combinator</h2>
<div>
<p>Đoạn 1 nằm trong div.</p>
<p>Đoạn 2 nằm trong div.</p>
<span><p>Đoạn 3 nằm trong div.</p></span>
</div>
<p>Đoạn 4 không nằm trong div.</p>
<p>Đoạn 5 không nằm trong div.</p>
</body>
</html>
General sibling combinator
General sibling combinator (~) cho phép chọn những phần tử nằm ngang hàng với phần tử được chỉ định (các phần tử "anh em").
div ~ p {
background-color: yellow;
}
Ở đây, phần tử p nằm ngang hàng với div sẽ có background-color: yellow, còn các thẻ p khác nằm trong div thì không.
Ví dụ:
<!DOCTYPE html>
<html>
<head>
<style>
/* Viết bởi Quantrimang.com */
div ~ p {
background-color: yellow;
}
</style>
</head>
<body>
<h2>Ví dụ General sibling combinator</h2>
<div>
<p>Đoạn 1 nằm trong div.</p>
<p>Đoạn 2 nằm trong div.</p>
<span><p>Đoạn 3 nằm trong div.</p></span>
</div>
<p>Đoạn 4 không nằm trong div.</p>
<p>Đoạn 5 không nằm trong div.</p>
</body>
</html>
Bạn nên đọc
Cũ vẫn chất
-
Mẹo lên level nhanh Blox Fruit, lên cấp nhanh Blox Fruit
Hôm qua -
15 phần mềm chỉnh sửa ảnh miễn phí tốt nhất trên máy tính
Hôm qua 3 -
11 lựa chọn thay thế tốt nhất cho Canva
Hôm qua -
eQuiz - Bài kiểm tra trắc nghiệm về lập trình C (Phần 1)
Hôm qua -
18 mặt đồng hồ Apple Watch thông dụng nhất
Hôm qua -
3133 là gì? 3133 là số điện thoại của tổng đài nào? Có phải lừa đảo không?
Hôm qua -
Cách xóa đường kẻ ngang trong Word
Hôm qua -
Cách fix lỗi 0xc000007b trên Windows
Hôm qua 4 -
Cách tắt đang soạn tin nhắn Zalo
Hôm qua -
Cách đổi font chữ mặc định trong Google Docs
Hôm qua