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:

<div>
    <p>
        <h2>
            <h3></h3>
        </h2>
    </p>
    <h1></h1>
</div>
<h5></h5>
<h6></h6>
<span></span>

<div>

• Là cha của phần tử <p>, <h1>
• Là tổ tiên của phần tử <p>, <h1>, <h2>, <h3>

<h5>

• Là em ruột của <div>
• Là em ruột liền kề của <div>

<h6>

• Là em ruột của <div>, <h5>
• Là em ruột liền kề của <h5>

<span>

• Là em ruột của  <div>, <h5>, <h6>
• Là em ruột liền kề của <h6>

<p>

• Là con của <div>
• Là con cháu của <div>
• Là cha của <h2>
• Là tổ tiên của <h2>, <h3>

<h1>

• Là con của <div>
• Là con cháu của <div>
• Là em ruột của <p>
• Là em ruột liền kề của <p> 

<h2>

• Là con của <p>
• Là con cháu của <p>, <div>
• Là cha của <h3>
• Là tổ tiên của <h3> 

<h3>

• 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

div > p {
    background-color:yellow;
}

div > * {
    background-color:yellow;
}

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

div p {
    border:1px solid black;
}

div  * {
    border: 1px solid black;
}

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

div ~ p {
   background-color:yellow;
}

div ~ * {
    background-color:yellow;
}

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

div + p {
    background-color:yellow;
}

div + * {
    background-color:yellow;
}