Cách chọn phần tử dựa theo quan hệ huyết thống trong CSS

Mối quan hệ giữa các phần tử
Trong một tập hợp các phần tử HTML, chúng cũng có những mối quan hệ huyết thống giống như con người chúng ta.

Ví dụ, tôi có một đoạn mã HTML như sau:

Là con của <h2>
Là con cháu của <h2>, <p>, <div>
Chọn phần tử dựa theo mối quan hệ CHA – CON
Phần tử B được gọi là con của phần tử A nếu:

Phần tử B nằm bên trong phần tử A
Và phần tử B không nằm bên trong bất kỳ phần tử nào khác bên trong A
Bộ chọn element1 > element2 dùng để chọn phần tử element2 là con của phần tử element1

Ví dụ
Chọn phần tử <p> là con của phần tử <div>

Ví dụ
Chọn tất cả phần tử là con của phần tử <div>

Chọn phần tử dựa theo mối quan hệ TỔ TIÊN – CON CHÁU
Phần tử B được gọi là con cháu của phần tử A, nếu phần tử B nằm bên trong phần tử A.

Bộ chọn element1 element2 dùng để chọn phần tử element2 là con cháu của phần tử element1

Ví dụ
Chọn những phần tử <p> là con cháu của phần tử <div>

Ví dụ
Chọn tất cả những phần tử là con cháu của phần tử <div>

Chọn phần tử dựa theo mối quan hệ ANH CHỊ – EM RUỘT
Phần tử B được gọi là em ruột của phần tử A, nếu phần tử B nằm phía sau phần tử A và có cùng cha với phần tử A.

Bộ chọn element1 ~ element2 dùng để chọn phần tử element2 là em ruột của phần tử element1

Ví dụ
Chọn những phần tử <p> là em ruột của phần tử <div>

Ví dụ
Chọn tất cả những phần tử là em ruột của phần tử <div>

Chọn phần tử dựa theo mối quan hệ ANH CHỊ – EM RUỘT LIỀN KỀ
Phần tử B được gọi là em ruột liền kề của phần tử A, nếu phần tử B nằm liền kề ngay phía sau phần tử A và có cùng cha với phần tử A.

Bộ chọn element1 + element2 dùng để chọn phần tử element2 là em ruột liền kề của phần tử element1

Ví dụ
Chọn những phần tử <p> là em ruột liền kề của phần tử <div>

Ví dụ
Chọn phần tử là em ruột liền kề của phần tử <div>

 

Học CSS