Thông tin liên hệ

Bài 19: Vùng chọn trong CSS (CSS Combinators)

Thứ ba - 14/05/2019 04:48

1. CSS Combinators là gì?

CSS combinators mình hiểu đơn giản là mối liên hệ giữa các selector. Cũng như con người chúng ta cũng có liên hệ với nhau như cha con, ông cháu, anh chị em.. Selector cũng vậy nó đều có mối liên hệ với các selector khác. 

Ví dụ mình có cấu trúc như sau:

 

<div>
    <p>Content</p>
</div>

Thì thẻ div và thẻ p sẽ có mối liên hệ như sau: Thẻ div là thẻ cha và thẻ p là thẻ con, và trong CSS để truy vấn đến thẻ p thì ta có thể thông qua thẻ div như sau:

 

div p{
    /* Các thuộc tính CSS*/
}

Với cấu trúc CSS này thì tất cả các thẻ p nằm trong thẻ div đều bị ảnh hưởng, và ta gọi đây là CSS Combinators.

Nếu bạn không hiểu thì tạm thời đừng quan tâm nhé, vì mình sẽ giải thích rõ ở phần 2 sau.

2. Cách sử dụng CSS Combinators

Giả sử mình có đoạn mã HTML sau, mình sẽ sử dụng mẫu HTML này cho tất cả các ví dụ phía dưới.

HTML MẪU
 
<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <h6>Thẻ h6 cấp 0</h6>
        <div class="test">
            <h6>Thẻ h6 cấp 1 thứ nhất.</h6>
            <h6>Thẻ h6 cấp 1 thứ hai.</h6>
            <span>
                <h6>Thẻ h6 cấp 2 thứ nhất.</h6>
            </span>
            <h6>Thẻ h6 cấp 1 thứ ba.</h6>
            <div> 
                <div>
                    <h6>Thẻ h6 cấp 3</h6>
                </div>
            </div>
        </div>
        <h6>Thẻ h6 cấp 0</h6>
        <h6>Thẻ h6 cấp 0</h6>
    </body>
</html>

Descendant selector (space)

Space (khoảng trắng) có ý nghĩa là chọn tất cả những thẻ con nằm trong một selector nào đó.

Như ví dụ dưới đây sẽ chọn tất cả các thẻ h6 nằm trong thẻ div.test.Chạy thử chương trình để xem kết quả nhé.

Ví dụ
 
div.test h6 {
    color: red;
}

Và đây là hình ảnh lúc chạy lên:

abc

Kết quả trên là quá dễ hiểu rồi đúng không. Mình sẽ không  giải thích gì nữa nha. Nào mình cùng đi qua tìm hiểu tiếp mối liên hệ tiếp theo.

Child selector (>)

Child selector (>) có ý nghĩa là chọn tất cả  những thẻ con trực tiếp của một selector nào đó. Nghĩa là thẻ con nằm vô trong đúng một cấp so với selector đó.

Và như trong ví dụ dưới đây sẽ chọn tất cả thẻ h6 (dòng 13, 14, 18)  vì nó là con trực tiếp của thẻ div.test 

Cấu trúc CSS:

Ví dụ
 
div.test > h6 {
     color: red;
}

Và đây là hình ảnh lúc chạy lên:

   abc

Mình nghĩ có một số bạn mới (cũng giống như  mình lần đầu đọc cái này) sẽ  thắc mắc vì sao thẻ h6 (dòng 16) nằm trong spanh6 nằm trong <div> <div>  (dòng 21) sẽ không được chọn. Mình xin được giải thích là vì nó không phải là con trực tiếp của thẻ div.test mà nó thuộc về  dạng cháu, chắt rồi nha.  

Adjacent sibling selector (+)

Adjacent sibling selector (+) có ý nghĩa là chọn tất cả những thẻ anh/chị/em ruột nằm liền kề ngay sau một selector nào đó. Mình hiểu mối liên hệ  anh/chị/em ruột giữa selectors cũng giống như mối liên hệ anh/chị/em ruột của  con người chúng ta là phải cùng chung một cha theo đúng nghĩa đen nha.. 

Như ở ví dụ sau sẽ chọn  thẻ  h6  (dòng 25) vì nó nằm liền kề ngay sau thẻ div.test. và cùng chung thẻ cha là   thẻ body

Cấu trúc CSS:

Ví dụ
 
div.test + h6 {
     color: red;
}

Và đây là hình ảnh lúc chạy lên:

  abc

Một số bạn sẽ thắc mắc vì sao thẻ h6 (dòng 26) sẽ không được chọn. Vì nó không phải nằm liền kề ngay thẻ div.test mà nó chỉ nằm liền kề ngay thẻ h6 (dòng 25) thôi các bạn.

General sibling selector (~)

General sibling selector (~) có ý nghĩa là chọn tất cả những thẻ anh/chị/em của selector nào đó. Tuy nhiên những thẻ này phải nằm phía sau selector đó.

Như trong ví dụ này là tất cả thẻ h6 nằm phía sau thẻ div.test và cùng chung thẻ cha là body

Cấu trúc CSS:

Ví dụ
 
div.test ~ h6 {
     color: red;
}

Và kết quả đoạn HTML trên là:

abc

Kết quả này thì quá dễ hiểu rồi nha. Chỉ cần là anh/chị/em nằm phía sau thì đều được áp dụng hết.

3. Lời kết

Như vậy là mình đã giới thiệu xong cho các bạn CSS combinators. Các bạn cũng biết nó là gì và cách sử dụng nó như thế nào rồi. Chúc các bạn vận dụng CSS Combinators tốt.

Cuối cùng, trong quá trình viết không thể tránh khỏi sai sót. Nếu có bất cứ điểm nào không hợp lý mong nhận được sự góp ý chân thành của các bạn để mình có thể cải thiện cho series ngày càng một tốt hơn. Cám ơn các bạn đã đọc.

Tác giả bài viết: vansieunhan

Tổng số điểm của bài viết là: 0 trong 0 đánh giá

Click để đánh giá bài viết

  Ý kiến bạn đọc

Bạn đã không sử dụng Site, Bấm vào đây để duy trì trạng thái đăng nhập. Thời gian chờ: 60 giây