Tìm Hiểu Về Các Loại CSS Selector

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.

1. Selector Cơ Bản

1.1. Selector Theo Thẻ (Type Selector)

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.

1.2. Selector Theo Class (Class Selector)

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”.

1.3. Selector Theo ID (ID Selector)

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.

2. Selector Phức Tạp

2.1. Selector Tổ Hợp (Combinator Selector)

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:

• Descendant Selector (Chọn các phần tử con):

div p {
    color: red;
}

Chọn tất cả các thẻ <p> nằm trong thẻ <div>.

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

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>.

• Adjacent Sibling Selector (Chọn phần tử anh/chị kế tiếp):

h1 + p {
    margin-top: 20px;
}

Chọn thẻ <p> ngay sau thẻ <h1>.

• General Sibling Selector (Chọn tất cả các phần tử anh/chị):

h1 ~ p {
    color: grey;
}

Chọn tất cả các thẻ <p> sau thẻ <h1> trong cùng một cấp cha.

2.2. Attribute Selector

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.

3. Pseudo Classes và Pseudo Elements

3.1. Pseudo Classes

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.

3.2. Pseudo Elements

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>.

4. Selector Nhóm (Group Selector)

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>. *