Selector trong CSS là gì? Bạn có thể không biết rất nhiều selector thú vị đấy! • Kiến càng

Trong khi thao tác CSS, bộ chọn (selector) là cái được viết ra đầu tiên. Nó là đối tượng mà chúng ta muốn tác động, tiếp theo mới viết các khai báo, trong khai báo có thuộc tính và giá trị (xem thêm cú pháp của CSS).

Đễ cho dễ tưởng tượng hơn, giả dụ bạn là thợ sơn chuyên nghiệp, khách hàng alo cho bạn, anh ta muốn sơn ngôi nhà có màu xanh, và các viền cửa màu nâu.

OK, chuyện đó chẳng khó gì với bạn, thế nhưng nếu khách hàng không cho biết địa chỉ cụ thể của ngôi nhà thì bạn biết sơn vào đâu? Địa chỉ ngôi nhà có thể nói là selector. Dưới đây là các dòng code thực tế. Thí dụ:

#menu {
font-size: 18px;
background-color: lime;
}

Cái #menu chính là bộ chọn.

Nếu không nắm rõ về selector, bạn sẽ gặp khó khăn trong việc CSS, rất có thể bạn sẽ lạm dụng id và class, các đoạn mã bị rối loạn, chồng chéo và thiếu kiểm soát.

Câu hỏi đầu tiên, CSS có những bộ chọn nào?

Selector tất cả các thành phần HTML (ví dụ p{}, div{}, span{});
Selector các thành phần có cùng tên class (ví dụ .freehostpage{});
Selector các thành phần có cùng tên id (ví dụ #freehostpage{});
Selector các thẻ cùng loại (ví dụ p{});
Selector nhiều thẻ khác nhau (ví dụ p, u, i{});
Selector thành phần nằm trong thành phần khác (ví dụ p ul li {});
Selector thành phần phải là con của thành phần khác (ví dụ p > ul li {});
Selector các lớp giả (ví dụ first child);
Selector dựa vào thuộc tính của thẻ;

1. Chọn tất cả các thành phần HTML

Sử dụng dấu * để chọn tất cả các thành phần của HTML, ví dụ:

* {
    margin: 0;
    padding: 0;
}

Bạn có thấy đoạn code trên quen quen không? nó thường dùng để khử mặc định trình duyệt về lề và đệm của tất cả các thẻ trong HTML.

2. Chọn tất cả thành phần có cùng tên class

Sử dụng dấu chấm (.) theo sau đó là tên class để làm bộ chọn, thí dụ ta có mã đánh dấu HTML như sau:

<h2 class="tieude">Kiến càng</h2>

Để tác động vào các thẻ có class là tieude, trong CSS viết:

.tieude {
   color: red;
}

Lưu ý: tất cả các class có cùng tên đều bị tác động bởi câu lệnh trên.

3. Chọn thành phần có tên id

Với id, sử dụng dấu # để bắt đầu bộ chọn, sau đấy là tên của íd, ví dụ đầu bài về menu chính là minh họa về cách sử dụng id làm selector.

#menu {
font-size: 18px;
}

Bạn có thể đọc bài viết sự giống và khác nhau giữa id và class để có thêm thông tin.

4. Chọn tất cả các thẻ cùng loại

Thí dụ tôi muốn văn bản có font là arial thì viết như này:

p {
   font-family: Arial Helvetica sans-serif;
}

Khi ấy, bất kỳ văn bản nào trong trang web đều được quy định font là Arial…Tương tự, câu lệnh:

h2 {
   margin-left: 10px;
   padding: 5px;
}

5. Chọn nhiều thẻ khác nhau cùng một lúc

Giả dụ nếu bạn muốn cả thẻ h2, h3 và thẻ p cùng có lề trên là 10px thì viết như sau:

h2, h3, p {
   margin-top: 10px;
}

Lưu ý:

Các thẻ ngăn nhau bằng dấu phẩy;
Không giới hạn số thẻ;

Tác dụng lớn nhất của selector này là nó giúp chúng ta đỡ phải viết code lặp đi lặp lại.

6. Chọn thành phần nằm trong một thành phần khác

Câu lệnh:

div h3 {
    font-weight: normal;
}

Dòng code trên sẽ làm tất cả các thẻ h3 nằm trong div đều chịu ảnh hưởng của lệnh, dù là thẻ con, cháu, chắt…của div.

7. Chọn chính xác thành phần phải là con của một thành phần khác

Câu lệnh:

#right>h2{
   font-size: 12px;
   color: blue;
}

Selector trên sẽ chọn tất cả các thẻ h2 là con của id có tên là right. Có bạn sẽ hỏi: câu lệnh này với câu lệnh chọn thành phần nằm trong một thành phần khác có gì khác nhau?

Sự khác nhau nằm ở độ sâu của tác động. Một cái tác động rất sâu và rộng vào mọi thành phần con và cháu, còn một cái chỉ tác động vào các thẻ nào là con mà thôi.

8. Chọn các lớp giả

Các lớp giả bao gồm :link, :hover, :visited, :active, :focus, :first-letter, :first-line, :first-child, :before, :after, :lang (mã ngôn ngữ) – nổi tiếng nhất trong nhóm này là hover. Ví dụ:

a:hover {
   color: gray;
}

Câu lệnh này làm cho người dùng khi di chuột qua liên kết thì link đổi sang màu xám. Đọc thêm bài CSS cho thẻ a để biết chi tiết hơn cách tạo style cho liên kết.

9. Chọn dựa vào thuộc tính của thẻ

Bạn chọn thẻ muốn tác động dựa vào thuộc tính của nó, thí dụ đoạn code sau:

<!DOCTYPE html>
<html>
<head>
<style>
a[target=_blank]
{
background-color:lime;
}
</style>
</head>
<body>
 
<a href="http://vi.wikipedia.org">vi.wikipedia.org</a>
<a href="freehost.page" target="_blank">Kiến càng</a>
<a href="http://vnexpress.net">vnexpress.net</a>
 
</body>
</html>

Có 3 thẻ a trong body, nhưng bằng cách sử dụng thuộc tính để tác động, làm cho chỉ thẻ a ở giữa có màu nền là lime, 2 thẻ a còn lại không bị ảnh hưởng gì.