Cafedev chia sẻ cho ace về bộ chọn(Selectors) trong CSS là gì? Nó có công dụng gì với?
Nội dung chính
1.Selectors(Bộ chọn ) là gì?
Bộ chọn(Selectors) CSS được sử dụng để “tìm” (hoặc chọn) các thành phần HTML mà bạn muốn tạo kiểu(style).
Chúng ta có thể chia các bộ chọn CSS thành năm loại:
- Bộ chọn đơn giản (chọn thành phần dựa trên tên, id, lớp)
- Bộ chọn kết hợp (chọn các yếu tố dựa trên mối quan hệ cụ thể giữa chúng)
- Bộ chọn lớp giả (chọn các thành phần dựa trên một trạng thái nhất định)
- Bộ chọn phần tử giả (chọn và định kiểu một phần của phần tử)
- Bộ chọn thuộc tính (chọn thành phần dựa trên giá trị thuộc tính hoặc thuộc tính)
Trang này sẽ giải thích các bộ chọn trong CSS cơ bản nhất và sau đó chi tiết hơn trong các bài sau cho ace nắm rõ hơn.
2. Bộ chọn phần tử CSS
Bộ chọn phần tử chọn các phần tử HTML dựa trên tên phần tử.
Tại đây, tất cả các phần tử “<p>” trên trang sẽ được căn giữa, với màu văn bản màu đỏ:
<!DOCTYPE html>
<html>
<head>
<style>
p {
text-align: center;
color: red;
}
</style>
</head>
<body>
<p>Every paragraph will be affected by the style.</p>
<p id="para1">Cafedev too!</p>
<p>And Cafedev!</p>
</body>
</html>
3. Bộ chọn id trong CSS
Bộ chọn id sử dụng thuộc tính id của một phần tử HTML để chọn một phần tử cụ thể.
Id của một thành phần là duy nhất trong một trang, vì vậy bộ chọn id được sử dụng để chọn một thành phần duy nhất!
Để chọn một phần tử có id cụ thể, hãy viết ký tự băm (#), theo sau là id của phần tử.
Ví dụ: Quy tắc CSS dưới đây sẽ được áp dụng cho phần tử HTML với id = “para1”:
<!--
Cafedev.vn - Kênh thông tin IT hàng đầu Việt Nam
@author cafedevn
Contact: cafedevn@gmail.com
Fanpage: https://www.facebook.com/cafedevn
Group: https://www.facebook.com/groups/cafedev.vn/
Instagram: https://instagram.com/cafedevn
Twitter: https://twitter.com/CafedeVn
Linkedin: https://www.linkedin.com/in/cafe-dev-407054199/
Pinterest: https://www.pinterest.com/cafedevvn/
YouTube: https://www.youtube.com/channel/UCE7zpY_SlHGEgo67pHxqIoA/
-->
<!DOCTYPE html>
<html>
<head>
<style>
#para1 {
text-align: center;
color: red;
}
</style>
</head>
<body>
<p id="para1">Hello Cafedev!</p>
<p>This paragraph is not affected by the style.</p>
</body>
</html>Lưu ý: Tên id không thể bắt đầu bằng số!
4. Class Selector
Bộ chọn lớp Selector của các thành phần HTML với thuộc tính lớp cụ thể.
Để chọn các phần tử với một lớp cụ thể, hãy viết một ký tự dấu chấm (.), Theo sau là tên lớp.
Ví dụ: Trong ví dụ này, tất cả các phần tử HTML có class = “center” sẽ có màu đỏ và căn giữa:
<!DOCTYPE html>
<html>
<head>
<style>
.center {
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1 class="center">Red and center-aligned heading</h1>
<p class="center">Red and center-aligned paragraph.</p>
</body>
</html>Bạn cũng có thể chỉ định rằng chỉ các phần tử HTML cụ thể sẽ bị ảnh hưởng bởi một lớp.
Ví dụ: Trong ví dụ này, chỉ các phần tử <P>với class = “center” sẽ được căn giữa:
<!DOCTYPE html>
<html>
<head>
<style>
p.center {
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1 class="center">This heading will not be affected</h1>
<p class="center">This paragraph will be red and center-aligned.</p>
</body>
</html>Các phần tử HTML cũng có thể tham chiếu đến nhiều hơn một lớp.
Ví dụ: Trong ví dụ này, phần tử <P> sẽ được tạo kiểu theo class = “center” và to class = “large”:
<!--
Cafedev.vn - Kênh thông tin IT hàng đầu Việt Nam
@author cafedevn
Contact: cafedevn@gmail.com
Fanpage: https://www.facebook.com/cafedevn
Group: https://www.facebook.com/groups/cafedev.vn/
Instagram: https://instagram.com/cafedevn
Twitter: https://twitter.com/CafedeVn
Linkedin: https://www.linkedin.com/in/cafe-dev-407054199/
Pinterest: https://www.pinterest.com/cafedevvn/
YouTube: https://www.youtube.com/channel/UCE7zpY_SlHGEgo67pHxqIoA/
-->
<!DOCTYPE html>
<html>
<head>
<style>
p.center {
text-align: center;
color: red;
}
p.large {
font-size: 300%;
}
</style>
</head>
<body>
<h1 class="center">This heading will not be affected</h1>
<p class="center">This paragraph will be red and center-aligned.</p>
<p class="center large">This paragraph will be red, center-aligned, and in a large font-size.</p>
</body>
</html>
Lưu ý: Tên lớp không thể bắt đầu bằng số!
5. Bộ chọn toàn thể trong CSS
Bộ chọn toàn thể (*) chọn tất cả các thành phần HTML trên trang.
Ví dụ: Quy tắc CSS dưới đây sẽ ảnh hưởng đến mọi thành phần HTML trên trang:
<!DOCTYPE html>
<html>
<head>
<style>
* {
text-align: center;
color: blue;
}
</style>
</head>
<body>
<h1>Hello world!</h1>
<p>Every element on the page will be affected by the style.</p>
<p id="para1">Me too!</p>
<p>And me!</p>
</body>
</html>6. Nhóm selector trong CSS
Bộ chọn nhóm chọn tất cả các thành phần HTML có cùng định nghĩa kiểu.
Nhìn vào code CSS sau (các phần tử h1, h2 và p có cùng định nghĩa kiểu):
h1 {
text-align: center;
color: red;
}
h2 {
text-align: center;
color: red;
}
p {
text-align: center;
color: red;
}Sẽ tốt hơn để nhóm các bộ chọn, để giảm thiểu code.
Để chọn nhóm, tách từng bộ chọn bằng dấu phẩy.
<!--
Cafedev.vn - Kênh thông tin IT hàng đầu Việt Nam
@author cafedevn
Contact: cafedevn@gmail.com
Fanpage: https://www.facebook.com/cafedevn
Group: https://www.facebook.com/groups/cafedev.vn/
Instagram: https://instagram.com/cafedevn
Twitter: https://twitter.com/CafedeVn
Linkedin: https://www.linkedin.com/in/cafe-dev-407054199/
Pinterest: https://www.pinterest.com/cafedevvn/
YouTube: https://www.youtube.com/channel/UCE7zpY_SlHGEgo67pHxqIoA/
-->
<!DOCTYPE html>
<html>
<head>
<style>
h1, h2, p {
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1>Hello Cafedev!</h1>
<h2>Smaller heading!</h2>
<p>This is a paragraph.</p>
</body>
</html>Nếu bạn thấy hay và hữu ích, bạn có thể tham gia các kênh sau của cafedev để nhận được nhiều hơn nữa:
Chào thân ái và quyết thắng!
 trong CSS là gì? Nó có công dụng gì với?){kind=link}