Cách chọn phần tử dựa theo quan hệ huyết thống trong CSS, chọn phần tử dựa theo quan hệ cha con, chọn phần tử dựa theo quan hệ tổ tiên ông bà con cháu, chọn phần tử dựa theo quan hệ anh chị em ruột

Cách chọn phần tử dựa theo quan hệ huyết thống trong CSS, chọn phần tử dựa theo quan hệ cha con, chọn phần tử dựa theo quan hệ tổ tiên ông bà con cháu, chọn phần tử dựa theo quan hệ anh chị em ruột

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

Ví dụ

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


div > p {
    background-color:yellow;
}
Ví dụ

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


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

Ví dụ

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


div p {
    border:1px solid black;
}
Ví dụ

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


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

Ví dụ

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


div ~ p {
   background-color:yellow;
}
Ví dụ

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


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

Ví dụ

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


div + p {
    background-color:yellow;
}
Ví dụ

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


div + * {
    background-color:yellow;
}

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

Click giùm một cái QUẢNG CÁO để hỗ trợ duy trì website, các bạn ơi