CSS selector là một phần quan trọng trong việc định dạng các phần tử trên trang web. Chúng giúp bạn chọn các phần tử HTML mà bạn muốn áp dụng kiểu dáng (style). Trong bài viết này, chúng ta sẽ tìm hiểu về các loại CSS selector phổ biến và cách sử dụng chúng.
Selector theo thẻ cho phép bạn chọn tất cả các phần tử thuộc một thẻ cụ thể. Ví dụ:
p {
color: blue;
}Ở đây, tất cả các thẻ <p> trên trang web sẽ có màu chữ là xanh.
Selector theo class giúp bạn chọn các phần tử có cùng một class. Để sử dụng, bạn cần thêm dấu chấm (.) trước tên class:
.button {
background-color: green;
}Ví dụ này sẽ áp dụng kiểu dáng cho tất cả các phần tử có class là “button”.
Selector theo ID cho phép bạn chọn một phần tử cụ thể có ID duy nhất. Để sử dụng, bạn cần thêm dấu # trước tên ID:
#header {
font-size: 24px;
}Chỉ có một phần tử với ID là “header” sẽ được áp dụng kiểu dáng này.
Selector tổ hợp cho phép bạn chọn các phần tử dựa trên mối quan hệ của chúng với các phần tử khác. Có ba loại tổ hợp chính:
div p {
color: red;
}Chọn tất cả các thẻ <p> nằm trong thẻ <div>.
ul > li {
list-style-type: square;
}Chọn tất cả các thẻ <li> là con trực tiếp của thẻ <ul>.
h1 + p {
margin-top: 20px;
}Chọn thẻ <p> ngay sau thẻ <h1>.
h1 ~ p {
color: grey;
}Chọn tất cả các thẻ <p> sau thẻ <h1> trong cùng một cấp cha.
Attribute selector cho phép bạn chọn các phần tử dựa trên thuộc tính và giá trị của chúng.
a[target="_blank"] {
color: orange;
}Chọn tất cả các thẻ <a> có thuộc tính target bằng _blank.
Pseudo classes cho phép bạn chọn các trạng thái đặc biệt của phần tử. Ví dụ:
a:hover {
color: red;
}Thay đổi màu của thẻ <a> khi chuột di chuyển qua.
Pseudo elements cho phép bạn chọn một phần cụ thể của phần tử. Ví dụ:
p::first-line {
font-weight: bold;
}Đặt kiểu chữ cho dòng đầu tiên của tất cả các thẻ <p>.
Selector nhóm cho phép bạn áp dụng cùng một kiểu dáng cho nhiều phần tử khác nhau bằng cách nhóm chúng lại.
h1, h2, h3 {
color: blue;
}*Áp dụng màu xanh cho tất cả các thẻ <h1>, <h2>, và <h3>. *
