CSS Selectors là thành phần cốt lõi của CSS, giúp bạn "chọn" các phần tử HTML mà bạn muốn áp dụng các quy tắc và định dạng. Hiểu rõ về các loại selectors sẽ giúp bạn kiểm soát chặt chẽ và chính xác hơn trong việc định dạng các phần tử trên trang web.

Trong bài viết này, chúng ta sẽ tìm hiểu chi tiết về các loại CSS selectors từ cơ bản đến nâng cao, kèm theo các ví dụ minh họa cụ thể.

1. CSS Selectors là gì?

Selectors trong CSS là các mẫu dùng để chọn phần tử HTML mà bạn muốn áp dụng quy tắc định dạng (styles). Mỗi selector xác định một hoặc nhiều phần tử cụ thể dựa trên loại, class, id, trạng thái, hoặc cấu trúc của chúng.

Cú pháp cơ bản:

css
selector {
    property: value;
}

Trong đó:

  • selector: Phần tử HTML mà bạn muốn áp dụng style.
  • property: Thuộc tính CSS.
  • value: Giá trị của thuộc tính đó.

2. Các loại CSS Selectors cơ bản

2.1. Type Selector (Chọn theo loại phần tử)

Type selector chọn tất cả các phần tử cùng loại trong tài liệu HTML. Đây là selector cơ bản và phổ biến nhất.

Cú pháp:

css
element {
    property: value;
}

Ví dụ:

css
p {
    color: blue;
}

Trong ví dụ này, tất cả các thẻ <p> trên trang sẽ có màu chữ là xanh.

2.2. Class Selector (Chọn theo class)

Class selector cho phép bạn chọn các phần tử có chung một class (class) bất kể loại phần tử đó là gì. Để sử dụng class selector, bạn thêm dấu . trước tên class.

Cú pháp:

css
.classname {
    property: value;
}

Ví dụ:

css
.button {
    background-color: green;
    color: white;
}

Trong ví dụ này, tất cả các phần tử HTML có class button sẽ có màu nền xanh lá và chữ màu trắng.

2.3. ID Selector (Chọn theo ID)

ID selector chọn một phần tử duy nhất dựa trên giá trị của thuộc tính id. ID là duy nhất trong toàn bộ tài liệu HTML, vì vậy mỗi ID chỉ có thể được sử dụng một lần.

Cú pháp:

css
#idname {
    property: value;
}

Ví dụ:

css
#header {
    background-color: lightgray;
    padding: 20px;
}

Trong ví dụ này, phần tử có ID header sẽ có màu nền xám nhạt và khoảng đệm là 20px.

2.4. Universal Selector (Chọn tất cả các phần tử)

Universal selector chọn tất cả các phần tử trên trang web. Đây là selector có phạm vi bao phủ rộng nhất.

Cú pháp:

css
* {
    property: value;
}

Ví dụ:

css
* {
    margin: 0;
    padding: 0;
}

Trong ví dụ này, tất cả các phần tử trên trang web sẽ có margin và padding bằng 0.

2.5. Group Selector (Chọn nhóm phần tử)

Group selector cho phép bạn áp dụng cùng một quy tắc CSS cho nhiều phần tử khác nhau bằng cách ngăn cách các selectors bằng dấu ,.

Cú pháp:

css
selector1, selector2, selector3 {
    property: value;
}

Ví dụ:

css
h1, h2, h3 {
    font-family: Arial, sans-serif;
    color: darkblue;
}

Trong ví dụ này, các thẻ h1, h2, và h3 đều sẽ có font chữ Arial và màu chữ xanh đậm.

3. Các CSS Selectors nâng cao

3.1. Descendant Selector (Chọn phần tử con cháu)

Descendant selector chọn tất cả các phần tử con (hoặc con cháu) của một phần tử cha cụ thể. Các phần tử con không nhất thiết phải là con trực tiếp.

Cú pháp:

css
parent descendant {
    property: value;
}

Ví dụ:

css
div p {
    color: red;
}

Trong ví dụ này, tất cả các thẻ <p> nằm trong thẻ <div> sẽ có màu chữ đỏ.

3.2. Child Selector (Chọn phần tử con trực tiếp)

Child selector chỉ chọn các phần tử con trực tiếp của phần tử cha, không chọn các phần tử con cháu khác.

Cú pháp:

css
parent > child {
    property: value;
}

Ví dụ:

css
ul > li {
    list-style-type: square;
}

Trong ví dụ này, chỉ các thẻ <li> là con trực tiếp của thẻ <ul> sẽ có dấu đầu dòng dạng hình vuông.

3.3. Adjacent Sibling Selector (Chọn phần tử anh em cùng cấp)

Adjacent sibling selector chọn phần tử liền kề ngay sau một phần tử khác.

Cú pháp:

css
element1 + element2 {
    property: value;
}

Ví dụ:

css
h2 + p {
    margin-top: 0;
}

Trong ví dụ này, các thẻ <p> nằm ngay sau thẻ <h2> sẽ có margin-top bằng 0.

3.4. General Sibling Selector (Chọn tất cả phần tử anh em)

General sibling selector chọn tất cả các phần tử anh em của một phần tử trước đó.

Cú pháp:

css
element1 ~ element2 {
    property: value;
}

Ví dụ:

css
h2 ~ p {
    color: green;
}

Trong ví dụ này, tất cả các thẻ <p> là anh em của thẻ <h2> sẽ có màu chữ xanh lá.

3.5. Attribute Selector (Chọn theo thuộc tính)

Attribute selector cho phép bạn chọn các phần tử dựa trên giá trị của thuộc tính cụ thể.

Cú pháp:

css
[element] {
    property: value;
}

Ví dụ:

css
input[type="text"] {
    border: 1px solid black;
}

Trong ví dụ này, tất cả các thẻ <input> có thuộc tính type="text" sẽ có đường viền đen.

3.6. Pseudo-class Selector (Chọn theo trạng thái giả lập)

Pseudo-class selector cho phép bạn chọn các phần tử dựa trên trạng thái đặc biệt của chúng, như khi người dùng tương tác với phần tử hoặc vị trí của nó trong tài liệu.

Cú pháp:

css
selector:pseudo-class {
    property: value;
}

Ví dụ:

css
a:hover {
    color: red;
}

Trong ví dụ này, khi người dùng di chuột qua các thẻ <a>, màu chữ sẽ chuyển thành đỏ.

3.7. Pseudo-element Selector (Chọn phần tử giả lập)

Pseudo-element selector cho phép bạn chọn và định dạng một phần của nội dung của một phần tử như ký tự đầu tiên hoặc dòng đầu tiên.

Cú pháp:

css
selector::pseudo-element {
    property: value;
}

Ví dụ:

css
p::first-line {
    font-weight: bold;
}

Trong ví dụ này, dòng đầu tiên của mỗi thẻ <p> sẽ được in đậm.

4. Kết hợp nhiều CSS Selectors

Bạn có thể kết hợp nhiều selectors để tạo ra các quy tắc CSS mạnh mẽ và linh hoạt hơn.

Ví dụ:

css
div.highlight > p:first-of-type {
    color: red;
}

Trong ví dụ này, đoạn mã CSS sẽ áp dụng cho thẻ <p> đầu tiên là con trực tiếp của <div> có class highlight, làm cho nó có màu chữ đỏ.

5. Ví dụ tổng hợp về CSS Selectors

html
Thử online
<!DOCTYPE html>
<html lang="vi">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ví dụ về CSS Selectors</title>
    <style>
        /* Type Selector */
        h1 {
            color: blue;
        }

        /* Class Selector */
        .highlight {
            background-color: yellow;
        }

        /* ID Selector */
        #main {
            font-size: 20px;
        }

        /* Descendant Selector */
        div p {
            color: red;
        }

        /* Child Selector */
        ul > li {
            list-style-type: circle;
        }

        /* Adjacent Sibling Selector */
        h2 + p {
            font-style: italic;
        }

        /* Attribute Selector */
        input[type="text"] {
            border: 1px solid black;
        }

        /* Pseudo-class Selector */
        a:hover {
            color: green;
        }

        /* Pseudo-element Selector */
        p::first-letter {
            font-size: 30px;
            color: orange;
        }
    </style>
</head>
<body>
    <h1>CSS Selectors</h1>
    <div id="main">
        <p>Đây là ví dụ về CSS selectors.</p>
        <p class="highlight">Đây là đoạn văn được bôi vàng.</p>
    </div>
    <ul>
        <li>Mục 1</li>
        <li>Mục 2</li>
        <li>Mục 3</li>
    </ul>
    <h2>Subheading</h2>
    <p>Đoạn văn ngay sau heading.</p>
    <a href="#">Link này đổi màu khi hover</a>
    <p>Đây là ví dụ về pseudo-element với ký tự đầu tiên lớn và màu cam.</p>
</body>
</html>

6. Kết luận

CSS Selectors là công cụ mạnh mẽ giúp bạn kiểm soát và áp dụng các quy tắc CSS một cách hiệu quả. Hiểu rõ và biết cách sử dụng các loại selectors khác nhau sẽ giúp bạn dễ dàng định dạng và bố trí phần tử trên trang web.

Hy vọng qua bài viết này, bạn đã nắm vững cách sử dụng các CSS selectors từ cơ bản đến nâng cao và có thể áp dụng chúng một cách linh hoạt trong các dự án của mình!