Chọn phần con CSS

So với bộ lọc yếu tố后代, bộ lọc yếu tố con (Child selectors) chỉ có thể chọn các yếu tố là yếu tố con của một yếu tố cụ thể.

Chọn yếu tố con

Nếu bạn không muốn chọn các yếu tố后代元素, mà muốn thu hẹp phạm vi, chỉ chọn các yếu tố con của một yếu tố cụ thể, hãy sử dụng bộ lọc yếu tố con (Child selector).

Ví dụ, nếu bạn muốn chọn chỉ các yếu tố strong là con của yếu tố h1, bạn có thể viết như sau:

h1 > strong {color:red;}

Quy tắc này sẽ chuyển hai yếu tố strong đầu tiên dưới h1 thành màu đỏ, nhưng yếu tố strong trong h1 thứ hai không bị ảnh hưởng:

<h1>Đây là <strong>rất</strong> <strong>rất</strong> quan trọng.</h1>
<h1>This is <em>really <strong>very</strong></em> important.</h1>

Thử ngay

Giải thích ngữ pháp

Bạn đã nhận ra rằng con selector sử dụng dấu lớn (ký hiệu con).

Cả hai bên của ký hiệu con có thể có khoảng trống, điều này là tùy chọn. Do đó, bất kỳ cách viết nào sau đây đều không có vấn đề:

h1 > strong
h1> strong
h1 >strong
h1>strong

Nếu đọc từ phải sang trái, selector h1 > strong có thể được giải thích là “Chọn phần tử strong là con của phần tử h1”.

Kết hợp chọn phần con cháu và chọn phần con

Xin xem selector dưới đây:

table.company td > p

Chọn phần sẽ chọn tất cả các phần tử p là con của phần tử td, phần tử td này tự động kế thừa từ phần tử table có class chứa company.