CSS - Combinators

Xin chào các bạn nhà phát triển web đang học hỏi! Hôm nay, chúng ta sẽ cùng lặn sâu vào thế giới kỳ diệu của các bộ kết hợp CSS. Là người thầy máy tính gần gũi của bạn, tôi rất vui được dẫn dắt các bạn trong hành trình này. Tin tôi đi, đến cuối bài học này, bạn sẽ kết hợp các bộ chọn CSS như một chuyên gia!

What are CSS Combinators? (Những gì là các bộ kết hợp CSS?)

Trước khi chúng ta bắt đầu, hãy hiểu bộ kết hợp là gì. Trong CSS, các bộ kết hợp là các ký hiệu đặc biệt cho phép chúng ta tạo ra các mối quan hệ giữa các bộ chọn. Chúng giúp chúng ta nhắm mục tiêu các phần tử cụ thể dựa trên vị trí của chúng trong cây tài liệu. Hãy nghĩ của chúng như là gia vị bí mật mang lại siêu năng lực cho CSS của bạn!

Bây giờ, hãy cùng khám phá từng bộ kết hợp chi tiết.

CSS Combinators - Descendant Combinator (space) (Bộ kết hợp Descendant - khoảng cách)

Bộ kết hợp descendant là đơn giản nhất và được sử dụng phổ biến nhất. Nó được đại diện bằng một khoảng cách giữa hai bộ chọn. Nó chọn tất cả các phần tử là con của một phần tử xác định.

Hãy xem một ví dụ:

<div class="container">
<p>This is a paragraph inside the container.</p>
<section>
<p>This is a paragraph inside a section inside the container.</p>
</section>
</div>

.container p {
color: blue;
}

Trong ví dụ này, tất cả các phần tử <p> trong .container sẽ có màu xanh lam, không quan trọng chúng được nhúng sâu như thế nào. Đó là như nói, "Hey CSS, tìm tất cả các đoạn văn là con, cháu hoặc bất kỳ cấp độ nào là con của lớp container!"

CSS Combinators - Using List (Sử dụng danh sách)

Bây giờ, nếu chúng ta muốn áp dụng cùng một phong cách cho nhiều bộ chọn? Đó là nơi mà bộ kết hợp danh sách rất hữu ích. Nó không thực sự là một bộ kết hợp theo nghĩa truyền thống, nhưng đây là một kỹ thuật hữu ích cần biết.

h1, h2, h3 {
font-family: Arial, sans-serif;
}

Bộ chọn này sẽ áp dụng phông Arial cho tất cả các phần tử <h1>, <h2>, và <h3>. Đó là như nói, "Hey CSS, hãy để tất cả các loại tiêu đề này sử dụng phông Arial!"

CSS Combinators - Child Combinator (>) (Bộ kết hợp Child)

Bộ kết hợp child cụ thể hơn bộ kết hợp descendant. Nó chỉ chọn các phần tử là con trực tiếp của một phần tử.

<ul class="menu">
<li>Home</li>
<li>About
<ul>
<li>Our Team</li>
<li>Our History</li>
</ul>
</li>
<li>Contact</li>
</ul>

.menu > li {
font-weight: bold;
}

Trong ví dụ này, chỉ các phần tử <li> cấp cao nhất (Home, About, Contact) sẽ được in đậm. Các mục nhúng (Our Team, Our History) sẽ không bị ảnh hưởng. Đó là như nói, "CSS, hãy chỉ làm cho các con trực tiếp của .menu in đậm!"

CSS Combinators - Adjacent Sibling Combinator (+) (Bộ kết hợp Adjacent Sibling)

Bộ kết hợp adjacent sibling chọn một phần tử nằm trực tiếp sau một phần tử cụ thể khác.

<h1>Welcome to Our Website</h1>
<p>This is the first paragraph.</p>
<p>This is the second paragraph.</p>

h1 + p {
font-style: italic;
}

Ở đây, chỉ đoạn văn đầu tiên sau <h1> sẽ được in nghiêng. Đó là như nói, "Tìm đoạn văn ngay cạnh h1 và làm cho nó in nghiêng!"

CSS Combinators - General Sibling Combinator (~) (Bộ kết hợp General Sibling)

Bộ kết hợp general sibling tương tự như bộ kết hợp adjacent sibling, nhưng nó ít严格的 hơn. Nó chọn tất cả các phần tử là anh em của một phần tử xác định.

<h1>Our Products</h1>
<p>Introduction paragraph</p>
<div class="product">Product 1</div>
<p>Description 1</p>
<div class="product">Product 2</div>
<p>Description 2</p>

.product ~ p {
font-size: 0.9em;
}

Trong trường hợp này, tất cả các phần tử <p> nằm sau một phần tử .product sẽ có kích thước字体 nhỏ hơn. Đó là như nói, "CSS, tìm tất cả các đoạn văn là anh em của các phần tử .product và làm cho chúng nhỏ hơn một chút!"

CSS Combinators - Nesting of Combinators (Lồng ghép các bộ kết hợp)

Bây giờ, hãy cùng xem điều thực sự thú vị. Chúng ta có thể lồng ghép các bộ kết hợp để tạo ra các bộ chọn phức tạp hơn!

<div class="container">
<ul>
<li>Item 1</li>
<li>Item 2
<ul>
<li>Subitem 2.1</li>
<li>Subitem 2.2</li>
</ul>
</li>
<li>Item 3</li>
</ul>
</div>

.container > ul > li ul > li {
color: red;
}

Bộ chọn này đang nói: "Tìm các phần tử <li> là con trực tiếp của một <ul>, là con trực tiếp của một <li>, là con trực tiếp của một <ul>, là con trực tiếp của .container." Wow! Đó là một câu dài, nhưng nó cho phép nhắm mục tiêu rất chính xác.

Trong ví dụ của chúng ta, chỉ "Subitem 2.1" và "Subitem 2.2" sẽ có màu đỏ.

Combinator Cheat Sheet (Bảng备忘录 các bộ kết hợp)

Dưới đây là bảng tóm tắt tất cả các bộ kết hợp chúng ta đã học:

Combinator	Symbol	Example	Description
Descendant	(space)	div p	Chọn tất cả <p> trong <div>
Child	>	div > p	Chọn tất cả <p> là con trực tiếp của <div>
Adjacent Sibling	+	h1 + p	Chọn <p> ngay sau <h1>
General Sibling	~	h1 ~ p	Chọn tất cả <p> là anh em của <h1>

Nhớ rằng, thực hành là cách tốt nhất để thành thạo! Hãy thử nghiệm các bộ kết hợp này trong các dự án của riêng bạn. Nhanh chóng, bạn sẽ sử dụng CSS như một法师 web thực thụ!

Tôi hy vọng hướng dẫn này đã giúp ích. Các bộ kết hợp CSS có thể trông khó khăn ban đầu, nhưng chúng là những công cụ mạnh mẽ khi bạn đã thành thạo. Hãy tiếp tục mã hóa, học hỏi và quan trọng nhất, hãy vui vẻ với nó!

Credits: Image by storyset