Trong CSS, chọn phần tử là hậu duệ của phần tử khác là một khái niệm quan trọng khi muốn định dạng các phần tử con bên trong một phần tử cha nhất định. Điều này giúp ta tạo ra các thiết kế web chính xác và có tổ chức hơn.
Khi tìm hiểu về việc chọn hậu duệ, bộ chọn hậu duệ hay selector descendant sẽ là công cụ chính mà bạn sử dụng. Bộ chọn này cho phép bạn áp dụng các style cho một phần tử con bất kỳ bên trong một phần tử cha nào đó.
Cú pháp của bộ chọn hậu duệ
Cú pháp của bộ chọn hậu duệ rất đơn giản và dễ áp dụng. Bạn chỉ cần sử dụng một khoảng trắng giữa tên của phần tử cha và phần tử con.
cha con {
/* Định dạng css áp dụng cho phần tử con */
}
Ví dụ, hãy giả sử bạn muốn thay đổi màu chữ của tất cả các đoạn văn (<p>) bên trong một thẻ <div> cụ thể.
<div>
<p>Đoạn văn trong div.</p>
<span>Khác biệt.</span>
</div>
<p>Đoạn văn ngoài div.</p>
Với ví dụ trên, nếu muốn thay đổi màu chữ của tất cả các đoạn văn trong thẻ <div>, bạn sẽ viết CSS như sau:
div p {
color: blue;
}
Khối định dạng CSS trên sẽ áp dụng style màu xanh cho đoạn văn trong thẻ <div> mà không ảnh hưởng đến đoạn văn nằm ngoài thẻ <div>.
Các cấp độ hậu duệ
Bộ chọn hậu duệ không chỉ áp dụng cho các phần tử con trực tiếp mà còn có thể áp dụng cho các phần tử ở cấp độ sâu hơn.
Ví dụ:
<div>
<section>
<p>Đoạn văn trong section.</p>
</section>
</div>
Nếu viết CSS như sau:
div p {
color: red;
}
Khối định dạng này sẽ vẫn áp dụng màu đỏ cho đoạn văn bên trong thẻ <section>, dù phần tử <section> là một hậu duệ sâu hơn trong cây DOM.
Sử dụng nhiều bộ chọn hậu duệ
Bạn có thể chọn các phần tử con ở những cấp độ khác nhau bằng việc sử dụng nhiều selector.
Ví dụ:
div section p {
font-size: 16px;
}
Đoạn CSS trên sẽ chỉ áp dụng font-size 16px cho các đoạn văn nằm trong thẻ <section> nào mà bản thân nó lại nằm trong một <div>.
Kết hợp các selector khác
Ngoài ra, bộ chọn hậu duệ có thể kết hợp với các loại selector khác như class, id hoặc attribute selector.
Ví dụ, chọn tất cả các đoạn văn trong thẻ <div> với class "container":
<div class="container">
<p>Đoạn văn trong thẻ div có class container.</p>
<p class="highlight">Đoạn văn khác.</p>
</div>
CSS:
div.container p {
color: green;
}
Bộ chọn trên sẽ áp dụng màu xanh cho tất cả các đoạn văn bên trong thẻ <div> có class là "container".
Việc sử dụng bộ chọn hậu duệ đúng cách giúp tăng tính hiệu quả của mã CSS, làm cho trang web dễ bảo trì hơn và giúp tiết kiệm thời gian khi chỉnh sửa và phát triển trang web. Bằng cách hiểu rõ và áp dụng đúng bộ chọn này, bạn có thể tạo ra các thiết kế web tinh tế và chuẩn mực hơn.
Comments