Khóa học CSS - Bài 23 - Cách chọn đối tượng trong CSS

Quay về MỤC LỤC TỰ HỌC CSS

Mối quan hệ giữa các phần tử HTML trong CSS được thể hiện qua 04 ký hiệu sau:

·         Chọn phần tử con: dấu khoảng trắng (space)

·         Chọn phần tử con trực tiếp: dấu >

·         Chọn phần tử liền kề: dấu +

·         Chọn tất cả phần tử liền kề: dấu ~

1. Chọn phần tử con - Descendant Selector

Ví dụ sau chọn tất cả thẻ p nằm tong thẻ div:

div p {
    background-color: yellow;
}

và các giá trị HTML trong phần body:

<div>

  <p>Paragraph 1 in the div.</p>

  <p>Paragraph 2 in the div.</p>

  <span><p>Paragraph 3 in the div.</p></span>

</div>

<p>Paragraph 4. Not in a div.</p>

<p>Paragraph 5. Not in a div.</p>

2. Chọn phần tử con trực tiếp – Child Selector

Ví dụ sau chọn thẻ p nằm trong thẻ div và không có trung gian:

div > p {
    background-color: yellow;
}

và các giá trị HTML trong phần body:

<div>

  <p>Paragraph 1 in the div.</p>

  <p>Paragraph 2 in the div.</p>

  <span><p>Paragraph 3 in the div.</p></span> <!—không phải là phần tử con trực tiếp -->

</div>

<p>Paragraph 4. Not in a div.</p>

<p>Paragraph 5. Not in a div.</p>

3. Chọn phần tử liền kề - Adjacent Siblings

Ví dụ sau chọn thẻ p liền kề thẻ div nhất:

div + p {
    background-color: yellow;
}

và các giá trị HTML trong phần body:

<div>

  <p>Paragraph 1 in the div.</p>

  <p>Paragraph 2 in the div.</p>

</div>

<p>Paragraph 3. Not in a div.</p>

<p>Paragraph 4. Not in a div.</p>

4. Chọn tất cả phần tử liền kề - General Siblings

Ví dụ sau chọn tất cả thẻ p liền kề thẻ div:

div ~ p {
    background-color: yellow;
}

và các giá trị HTML trong phần body:

<p>Paragraph 1.</p>

<div>

  <code>Some code.</code>

  <p>Paragraph 2.</p>

</div>

<p>Paragraph 3.</p>

<code>Some code.</code>

<p>Paragraph 4.</p>

Nếu vẫn chưa rõ các bạn xem thêm video clip sau:

Quay về MỤC LỤC TỰ HỌC CSS

Tác giả: #drM

Nguồn: Sưu Tầm