Kết nối

CSS Selector (bộ chọn) là gì và cách sử dụng?

19.924 lượt xem 
 
Thể loại: Thiết kế Web 

Trong CSS, selector (tạm gọi là bộ chọn) là mẫu để chọn phần tử HTML mà bạn muốn định nghĩa phong cách. Các selector được áp dụng cho các trường hợp sau:

  • Tất cả phần tử theo một dạng cụ thể nào đó, ví dụ phần tử tiêu đề h1.
  • Thuộc tính id và class của các phần tử.
  • Các phần tử dựa vào mối liên quan với các phần tử khác trong cây phân cấp tài liệu.

Chọn phần tử theo thuộc tính class

Thuộc tính class có thể áp dụng cho bất kỳ phần tử nào trong HTML, ví dụ định nghĩa class=”dammio” cho phần tử div như sau.

<div class="dammio">Nội dung ví dụ --- dammio.com</div>

Khi đó để chọn phần tử theo thuộc tính class ở CSS bạn phải thêm dấu chấm (.) và giá trị thuộc tính. Ở ví dụ trên đó là .dammio như sau.

<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="utf-8"> 
<style>
.dammio { color:blue; }
</style>
</head>

<body>
<div class="dammio">Nội dung ví dụ --- dammio.com</div>
</body>

</html>

Nếu bạn muốn chọn tất cả thuộc tính class cùng với thuộc tính class khác bạn có thể chọn .class1.class2. Hãy xét đến ví dụ sau.

<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="utf-8"> 
<style>
.dammio.dammio1 { color:red; }
</style>
</head>

<body>
<div class="dammio dammio1">
	Nội dung ví dụ --- dammio.com
</div>
</body>

</html>

Nếu bạn muốn chọn tất cả thuộc tính class bên trong 1 phần tử chứa thuộc tính class khác thì bạn có thể chọn .class1 .class2. Hãy xét đến ví dụ sau.

<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="utf-8"> 
<style>
.dammio .dammio1 { color:red; }
</style>
</head>

<body>
<div class="dammio">
	<div class="dammio1">Nội dung ví dụ --- dammio.com</div>
</div>
</body>

</html>

Trong ví dụ trên thì chúng ta xét chọn class=”dammio01″ có tổ tiên là phần tử bất kỳ miễn có thuộc tính class=”dammio”.

Chọn phần tử có thuộc tính id

Trái với thuộc tính class, để chọn phần tử có thuộc tính id thì chúng ta thêm dấu # với giá trị của thuộc tính.

<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="utf-8"> 
<style>
#dammio { color:yellow; }
</style>
</head>

<body>
<div id="dammio">Nội dung ví dụ --- dammio.com</div>
</body>

</html>

Nếu thuộc tính id cũng nằm trong phần tử chứa thuộc tính id khác thì bạn cũng dùng tương tự đó #id #id2. Hãy xem ví dụ sau.

<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="utf-8"> 
<style>
#dammio #dammio1 { color:green; }
</style>

</head>
<body>
<div id="dammio">
	<div id="dammio1">
		Nội dung ví dụ --- dammio.com
	</div>
</div>
</body>
</html>

Chọn tất cả các phần tử trong tài liệu HTML

Nếu bạn muốn chọn hết tất cả phần tử để định nghĩa phong cách thì bạn có thể dùng dấu *. Khi đó, bạn không cần quan tâm đến tên thuộc tính và giá trị thuộc tính nữa. Cách này thường áp dụng để định nghĩa phong cách trong tài liệu HTML.

<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="utf-8"> 
<style>
* { color:yellow; }
</style>

</head>
<body>
<div id="dammio">
	<div id="dammio1">
		Nội dung ví dụ --- dammio.com
	</div>
</div>
</body>
</html>

Chọn phần tử HTML

Nếu bạn muốn chọn phần tử HTML thì bạn chỉ cần ghi tên phần tử đó trong CSS. Ví dụ như sau.

<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="utf-8"> 
<style>
h1{ color:yellow; }
h2 { color:blue; }
span { color:red; }
</style>

</head>
<body>
<h1>Tiêu đề h1 --- dammio.com</h1>
<h2>Tiêu đề h1 --- dammio.com</h2>
<span>Tiêu đề h1 --- dammio.com</span>
</body>
</html>

Lưu ý chỉ dùng cách này cho các phần tử HTML được định nghĩa theo tiêu chuẩn của W3C. Một số phần tử HTML mới và lạ (hiếm) có thể không sử dụng được.

Bạn cũng có thể chọn phần tử HTML theo nhiều cách khác như sau:

Trường hợp Ví dụ Diễn giải
element,element div, p Chọn tất cả phần tử div và tất cả phần tử p
element element div p Chọn tất cả phần tử p nằm bên trong phần tử div
element>element div>p Chọn tất cả phần tử p có cha là một phần tử div. Hay nói cách khác phần tử p phải là con trực tiếp của phần tử div.
element+element div+p Chọn tất cả phần tử p được đặt trực tiếp sau phần tử div.
element~element p~ul Chọn các phần tử ul sau phần tử p.
Liên quan:  [HTML/HTML5] Phần 6: Tiêu đề HTML

Một số trường hợp ở trên bạn có thể thấy mơ hồ, vì vậy hãy diễn giải thông qua các ví dụ sau.

Ví dụ về element>element

Bạn có thể thấy ở ví dụ sau chỉ có phần tử span là con trực tiếp của div mới có thể có phong cách chữ màu xanh dương.

<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="utf-8"> 
<style>
div>span {color:blue;}
</style>

</head>
<body>
<div>
	<span>Nội dung CSS --- dammio.com</span>
	<h1>
		<span>Dòng chữ này không có màu xanh vì không là con trực tiếp.</span>
	</h1>
</div>
</body>
</html>

Ví dụ về element+element

Bạn có thể thấy chỉ 1 phần tử span nằm sau thẻ div mới có chữ màu xanh. Những phần tử span khác đều không có chữ màu xanh.

<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="utf-8"> 
<style>
div+span {color:blue;}
</style>

</head>
<body>
<div>
	<span>Dòng chữ này không có màu xanh vì không đặt sau thẻ div.</span>
</div>
<span>Dòng chữ màu xanh --- dammio.com</span><br/>
<span>Dòng chữ màu xanh --- dammio.com</span>
</body>
</html>

Ví dụ về element~element

Trong ví dụ sau, bạn có thể thấy tất cả phần tử span nằm sau phần tử div đều có dòng chữ màu xanh.


<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="utf-8"> 
<style>
div~span {color:blue;}
</style>

</head>
<body>
<div>
	<span>Dòng chữ này không có màu xanh vì không đặt sau thẻ div.</span>
</div>
<span>Dòng chữ màu xanh --- dammio.com</span><br/>
<span>Dòng chữ màu xanh --- dammio.com</span>
</body>
</html>

Chọn phần tử theo thuộc tính bất kỳ

Ngoài thuộc tính id và class là trường hợp đặc biệt, nếu bạn muốn chọn phần tử có thuộc tính bất kỳ thì bạn có thể dùng cú pháp [tên thuộc tính]. Ví dụ phần tử a có chứa thuộc tính thì sẽ có chữ màu đỏ.

<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="utf-8"> 
<style>
[target] { color: red; }
</style>

</head>
<body>
<a target="blank" href="https://www.dammio.com">Nội dung ví dụ --- dammio.com</a></br>
<a href="https://www.dammio.com">Nội dung ví dụ --- dammio.com</a>
</body>
</html>

Ngoài ra còn có nhiều cách sử dụng thuộc tính khác hiếm khi sử dụng trong CSS như sau.

  • [attribute=value]: chọn tất cả thuộc tính kèm theo giá trị
  • [attribute~=value]: chọn tất cả thuộc tính mà giá trị có chứa cụm từ đầu vào, cụm từ này phải đứng riêng biệt cách các cụm khác bằng khoảng trắng.
  • [attribute|=value]: chọn tất cả thuộc tính có giá trị bắt đầu với cụm từ đầu vào và ngăn cách bằng dấu gạch ngang.
  • [attribute^=value]: chọn tất cả thuộc tính có giá trị bắt đầu với cụm từ đầu vào
  • [attribute$=value]: chọn tất cả thuộc tính có giá trị kết thúc là cụm từ đầu vào
  • [attribute*=value]: chọn tất cả thuộc tính có giá trị chứa chuỗi con là cụm từ đầu vào.

Chọn thuộc tính bằng dấu hai chấm (:)

Chắc hẳn, nhiều bạn rất quen thuộc với cách chọn a:hover để tạo hiệu ứng cho các liên kết khi người dùng rê chuột vào liên kết đó.

Ví dụ khi rê chuột liên kết thì sẽ có dòng chữ màu đỏ.

<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="utf-8"> 
<style>
a:hover { color: red; }
</style>

</head>
<body>
<a target="blank" href="https://www.dammio.com">Nội dung ví dụ --- dammio.com</a></br>
</body>
</html>

Trong cách chọn phần tử bằng dấu hai chấm thì còn có rất nhiều cách khác nữa mà không thể trình bày chi tiết hết trong bài viết. Hi vọng bạn sẽ tự tìm hiểu thêm và bài viết sẽ mang nhiều kiến thức cho bạn về CSS.

Trích dẫn bài viết
  • APA:
    Dammio. (2019). CSS Selector (bộ chọn) là gì và cách sử dụng?. https://www.dammio.com/2019/08/16/css-selector-bo-chon-la-gi-va-cach-su-dung.
  • BibTeX:
    @misc{dammio,
    author = {Dammio},
    title = {CSS Selector (bộ chọn) là gì và cách sử dụng?},
    year = {2019},
    url = {https://www.dammio.com/2019/08/16/css-selector-bo-chon-la-gi-va-cach-su-dung},
    urldate = {2024-03-13}
    }
Theo dõi
Thông báo của
guest
1 Bình luận
Cũ nhất
Mới nhất Được bỏ phiếu nhiều nhất
Phản hồi nội tuyến
Xem tất cả bình luận
trackback

[…] Trang đích: Xem trang […]

1
0
Rất thích suy nghĩ của bạn, hãy bình luận.x