CĂN BẢN
CSS3
CSS RESPONSIVE
CSS PARALLAX
CÁC CHỦ ĐỀ
BÀI MỚI NHẤT
Dự án mới của mình là gamehow.net, mời anh em ghé thăm và góp ý ạ.

Vùng chọn trong CSS (CSS Combinators)

Đến series này chắc các bạn cũng đã quen đến selector là gì rồi đúng ko? Trước giờ mình cũng đã quen áp dụng cho CSS thông qua tên thẻ HTML, ID và CLASS. Nhưng đối với trang web thực tế thì không phải thẻ HTML nào cũng có ID hoặc CLASS, vì thế để xác định các thẻ đó thì ta phải sử dụng một cách khác đó là  CSS Combinators.

Vậy CSS Combinators là gì? Cách sử dụng CSS Combinators như thế nào? Và ngày hôm nay mình xin được giới thiệu nội dung này đến các bạn.

banquyen png
Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức.

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 RUN
<!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. Bấm vào nút "RUN" để xem kết quả nhé.smiley

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

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

css combinator space selector png

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ụ RUN
div.test > h6 {
     color: red;
}

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

   css combinator child selector png

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. cool     

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..laughlaugh   

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ụ RUN
div.test + h6 {
     color: red;
}

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

  css combinator adjacent sibling selector png

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ụ RUN
div.test ~ h6 {
     color: red;
}

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

css combinator general  20sibling selector png

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.

Tham khảo: https://www.w3schools.com

Cùng chuyên mục:

Validate form bằng HTML5

Validate form bằng HTML5

Trước đây chúng ta hay validate form bằng Javascript, nhưng ...

Thẻ aside trong HTML5

Thẻ aside trong HTML5

Mình cũng không rõ người ta tạo ra thẻ này làm gì, nhưng nếu xét…

Thẻ hgroup trong HTML5

Thẻ hgroup trong HTML5

hgroup là một thẻ được thêm vào kể từ phiên bản ...

Thẻ header trong HTML5

Thẻ header trong HTML5

Nếu nhìn qua một trang web được xây dựng bằng HTML5 thì bạn ...

Các thẻ HTML tạo form thu thập dữ liệu

Các thẻ HTML tạo form thu thập dữ liệu

Trước khi bắt đầu thì bạn phải hiểu khái niệm form dữ liệu là ...

Tạo background và đường viền cho thẻ HTML

Tạo background và đường viền cho thẻ HTML

Để tạo màu nền cho một thẻ HTML bất kì thì ta sử dụng thuộc…

Tạo menu một cấp bằng HTML đơn giản

Tạo menu một cấp bằng HTML đơn giản

Để làm menu 1 cấp thì có rất nhiều giải pháp. Bạn có thể sử…

Tạo HTML danh sách bài viết đơn giản

Tạo HTML danh sách bài viết đơn giản

Mục đích mình đưa ra bài tập này là giúp các bạn hiểu được cách…

Tạo bổ cục layout HTML đơn giản

Tạo bổ cục layout HTML đơn giản

Qua bài học này bạn sẽ biết cách tạo một file style riêng để ..

Phân biệt ID và Class trong HTML

Phân biệt ID và Class trong HTML

Mỗi thẻ HTML đều có những thuộc tính riêng và khác nhau. Tuy nhiền ..

Cách dùng thẻ div trong HTML để tạo các khối giao diện

Cách dùng thẻ div trong HTML để tạo các khối giao diện

Thẻ div đóng vai trò rất quan trọng, nó được dùng để tạo ...

Phân biệt thẻ HTML Block và Inline

Phân biệt thẻ HTML Block và Inline

Có bao giờ bạn thắc mắc rằng, tại sao nội dung ...

Thuộc tính style trong HTML

Thuộc tính style trong HTML

Do chúng ta chưa học CSS nên mình sẽ không nói ...

Thẻ title trong HTML

Thẻ title trong HTML

Cách sử dụng thẻ title html ...

Thẻ style trong HTML

Thẻ style trong HTML

Style là một thẻ HTML bình thường, nó có công dụng là xác ...

Thẻ base trong HTML

Thẻ base trong HTML

Cách sử dụng thẻ base trong html ...

Thẻ link trong HTML

Thẻ link trong HTML

Cách sử dụng thẻ html ...

Thẻ meta trong HTML

Thẻ meta trong HTML

Cách sử dụng thẻ meta html ...

Thẻ script trong HTML

Thẻ script trong HTML

Cách sử dụng thẻ script html ...

Thẻ noscript trong HTML

Thẻ noscript trong HTML

Cách sử dụng thẻ noscript html ...

Top