CSS selectorts (Phần 1)

CSS selector là một khái niệm rất quan trọng trong CSS. Nắm vững CSS selector sẽ giúp sẽ là chìa khóa để học CSS.
Bài viết này mình sẽ giới thiệu với các bạn một số Selector hay được sử dụng trong việc viết mã CSS, Mình sẽ giữ nguyên những thuật ngữ chuyên môn mà không dịch sang Tiếng Việt để đảm bảo tính chính xác.

1, Universal selector

Universal là selector yếu nhất trong CSS, Universal selector thường được sử dụng để reset CSS.
Cấu trúc Universal selector như sau:

1	* {property 1: value 1 ;…; property n: value n }

Ví dụ sau ta sử dụng Universal selector để reset margin và padding của tất cả các thành phần về 0.

1	* {margin: 0; padding: 0}

Khi ta khai báo các thuộc tính tương tự lên các thành phần khác thì những gì đã khai báo trong Universal selector sẽ không còn tác dụng.

2, Type selectors

Type selector là các chỉ định tên của các thẻ HTML sẽ bị ảnh hưởng bởi các câu lệnh CSS. Cú pháp Type selectors như sau:

1	A {color: red}

Với A: là tên thẻ HTML
Ví dụ sau quy định tất cả các thành phần h2 được hiển thị với màu đỏ:

1	h2 {color: red}

3, Descendant selectors

Descendant selectors là cách chọn thành phần B là con hoặc cháu (và các cấp sâu hơn) của thành phần A nào đó.
Cú pháp Descendant selector như sau:

1	A B {property 1: value 1 ;…; property n: value n }

• A: Là thành phần cha
• B: là thành phần con, hoặc cháu,… của A

Chúng ta cùng xem xét ví dụ sau, dưới đây chúng ta có 3 thành phần <em>:

1	<p><em>Thành phần em thứ nhất là con của p</em></p>

2

<div>

3

<ul>

4	<li><em>Thành phần em thứ 2 là con của li, là cháu của ul và div</em></li>

5

</ul>

6	<em>Thành phần em thứ 3 là con của div</em>

7

</div>

Giả sử bây giờ ta chỉ muốn thành phần <em> thứ nhất được hiển thị với màu đỏ? thành phần <em> thứ 2 và thứ 3 có màu xanh:

1	p em {color: red}

2	div em{color: blue}

Chỉ có thành phần <em> thứ nhất thỏa điều kiện là con của <p> lên được hiển thị với màu đỏ.
Thành phần <em> thứ 2 là cháu của <div> và thành phần <em> thứ 3 là con của div lên được hiển thị với màu xanh

4, Child selectors

Khác với Descendant selectors, Child selector là cách chọn thành phần B là con của thành phần A nào đó, cú pháp Child selector như sau:

1	A > B {property 1: value 1 ;…; property n: value n }

• A: Là thành phần cha
• B: là con của A

Xét lại ví dụ trên, giả sử bây giờ ta chỉ muốn thành phần <em> thứ 3 có màu xanh, còn thành phần thứ 2 thì không bị ảnh hưởng, ta viết CSS như sau:

1	div > em {color: blue }

Chỉ có thành phần <em> thứ 3 là con của div nên được hiển thị với màu xanh. Thành phần em thứ 2 không bi ảnh hưởng vì là cháu của <div>

5, Adjacent sibling selectors

Chúng ta cùng xem xét ví dụ sau:

1	<p>Đoạn văn bản này là thành phần A</em></p>

2	<span>Thành phần span này là B</span>

3	<div>Thành phần div là C</div>

Câu hỏi đặt ra là có cách nào chọn được C dựa vào A hoặc B không? Câu trả lời là có, trong CSS đó chính là Adjacent sibling selectors (có thể gọi tắt là Sibling selectors) . Nó cho phép chọn một thành phần B ở gần thành phần A nhât trong tài liệu HTML, mà giữa A và B không có một thành phần D nào khác.

1	A + B {property 1: value 1 ;…; property n: value n }

Bây giờ chúng ta sẽ chọn thành phần  <div> C dựa vào thành phần <span> B và hiển thị với màu đỏ:

1	span + div {property color: red }

Tương tự ta có thể chọn được B dựa vào A

1	p + span {property color: red }

Nhưng không thể chọn C dựa vào A bởi vì giữa A và C có thành phần <span> B.

6, Classs selectors và ID selectors

Bạn vui lòng xem bài viết về Class và ID tại đây: Class và ID trong CSS

Bài viết này mình xin dừng lại ở đây, phần tiếp theo chúng ta sẽ cùng tìm hiểu về: Attribute selectors. Cám ơn các bạn đã quan tâm theo dõi.

7, Group selector

Group selector là cách nhóm các selector có cùng chung một quy luật giúp file CSS được gọn gàng hơn, mỗi selector sẽ được ngăn cách nhau bởi dấu , (Phẩy).

1	h1{color: blue}

2	h2{color: blue}

3	h3{color: blue}

Chúng ta có thể nhóm chung 3 selector trên lại như sau:

1	h1, h2, h3 { color: blue }