Tidadigi Logo

CSS Combinators

CSS combinators xác định mối quan hệ giữa hai CSS selectors. CSS selectors là các mẫu dùng để chọn phần tử để tạo kiểu. Một CSS selector có thể đơn giản hoặc phức tạp. Nó có thể bao gồm nhiều selector kết nối bằng combinators. Hiểu các combinators này rất quan trọng để tạo kiểu CSS chính xác và hiệu quả.

Các loại CSS Combinators

. General Sibling selector(~)

General sibling selector chọn các phần tử theo sau một phần tử đã chỉ định. Chúng phải có chung một phần tử cha. Điều này hữu ích để chọn các nhóm phần tử có cùng cha.

HTML 
<!DOCTYPE html>
<html>
  
<head>
    <title>Combinator Property</title>
    <style>
        div ~ p{
            color: #009900;
            font-size:32px;
            font-weight:bold;
            margin:0px;
            text-align:center;
        }
        div {
            text-align:center;
        }
    </style>
</head>

<body>
    <div>General sibling selector property</div>
    <p>GeeksforGeeks</p>
    <div>
        <div>child div content</div>
        <p>G4G</p>
    </div>
    <p>Geeks</p>
    <p>Hello</p>
</body>
  
</html>

Output: 

css-combinators

. Adjacent Sibling selector(+)

Adjacent sibling selector chọn một phần tử ngay bên cạnh phần tử chỉ định. Selector này chỉ chọn sibling (anh chị em ruột) kế tiếp.

HTML 
<!DOCTYPE html>
<html>
<head>
    <title>Combinator Property</title>
    <style>
        div + p{
            color: #009900;
            font-size:32px;
            font-weight:bold;
            margin:0px;
            text-align:center;
        }
        div {
            text-align:center;
        }
        p {
            text-align:center;
        }
    </style>
</head>

<body>
    <div>Adjacent sibling selector property</div>
    <p>GeeksforGeeks</p>
    <div>
        <div>child div content</div>
        <p>G4G</p>
    </div>
    <p>Geeks</p>
    <p>Hello</p>
</body>
  
</html>

Output: 

css-combinators

. Child Selector(>)

Child selector chọn các phần tử là con trực tiếp của một phần tử đã chỉ định. Combinator này chặt chẽ hơn descendant selector. Nó chỉ chọn các phần tử con trực tiếp.

HTML 
<!DOCTYPE html>
<html>
  
<head>
    <title>Combinator Property</title>
    <style>
        div > p{
            color: #009900;
            font-size:32px;
            font-weight:bold;
            margin:0px;
            text-align:center;
        }
        div {
            text-align:center;
        }
        p {
            text-align:center;
        }
    </style>
</head>

<body>
    <div>Child selector property</div>
    <p>GeeksforGeeks</p>
    <div>
        <div>child div content</div>
        <p>G4G</p>
    </div>
    <p>Geeks</p>
    <p>Hello</p>
</body>
  
</html>

Output: 

css-combinators

. Descendant selector(space)

Descendant selector chọn tất cả các phần tử là hậu duệ của một phần tử cụ thể. Các phần tử này có thể ở bất kỳ cấp độ nào bên trong phần tử đó.

HTML 
<!DOCTYPE html>
<html>
  
<head>
    <title>Combinator Property</title>
    <style>
        div p{
            color: #009900;
            font-size:32px;
            font-weight:bold;
            margin:0px;
            text-align:center;
        }
        div {
            text-align:center;
        }
        p {
            text-align:center;
        }
    </style>
</head>

<body>
    <div>Descendant selector property</div>
    <p>GeeksforGeeks</p>
    <div>
        <div>child div content</div>
        <p>G4G</p>
        <p>Descendant selector</p>
    </div>
    <p>Geeks</p>
    <p>Hello</p>
</body>
  
</html>

Output: 

css-combinators

Hiểu và sử dụng CSS combinators hiệu quả giúp bạn tạo kiểu trang web chính xác hơn. Mỗi combinator có một mục đích riêng biệt. Nó có thể dùng để nhắm mục tiêu các phần tử theo mối quan hệ HTML. Làm chủ các combinators này rất cần thiết cho các nhà phát triển web. Họ cần tạo ra các stylesheet phức tạp và có cấu trúc tốt.


Last Updated : 21/07/2025