CSS selector structure

Simple selector

Simple selector là selector chỉ có một thành phần duy nhất, chẳng hạn như một type selector, attribute selector hoặc pseudo-class đơn lẻ, không được kết hợp với bất kỳ thành phần selector hoặc combinator nào khác. Một phần tử được cho là khớp với simple selector khi simple selector đó mô tả chính xác phần tử đó. Bất kỳ selector nào chỉ chứa một basic selector, attribute selector, pseudo-class hoặc pseudo-element đều là simple selector.

#myId {
}

[pattern*="\d"] {
}

Compound selector

Compound selector là một chuỗi các simple selector không được phân cách bởi combinator. Compound selector đại diện cho tập hợp các điều kiện đồng thời trên một phần tử duy nhất. Một phần tử được cho là khớp với compound selector khi phần tử đó khớp với tất cả các simple selector trong compound selector đó.

a#selected {
}

[type="checkbox"]:checked:focus {
}

Trong compound selector, type selector hoặc universal selector phải đứng đầu tiên trong chuỗi selector. Chỉ được phép có một type selector hoặc universal selector trong chuỗi. Vì khoảng trắng đại diện cho descendant combinator, nên không được có khoảng trắng giữa các simple selector tạo nên compound selector.

Complex selector

Complex selector là một chuỗi gồm một hoặc nhiều simple và/hoặc compound selector được phân cách bởi combinator, bao gồm cả khoảng trắng là descendant combinator.

Complex selector đại diện cho tập hợp các điều kiện đồng thời trên một tập hợp phần tử.

a#selected > .icon {
}

.box h2 + p {
}

Có thể đọc selector từ phải sang trái. Ví dụ, a#selected > .icon khớp với tất cả phần tử có class là icon và là con trực tiếp của phần tử <a> có id là selected. Selector .box h2 + p khớp với phần tử <p> đầu tiên xuất hiện ngay sau bất kỳ phần tử <h2> nào là hậu duệ của phần tử có class là box.

Selector list

Selector list là danh sách phân cách bằng dấu phẩy của các simple, compound và/hoặc complex selector. Một phần tử được cho là khớp với selector list khi phần tử đó khớp với bất kỳ (ít nhất một) selector nào trong danh sách.

#main,
article.heading {
}

Nếu bất kỳ selector nào trong danh sách non-forgiving selector không hợp lệ, toàn bộ selector list sẽ bị vô hiệu hóa.

#main,
:bad-pseudoclass,
.validClass {
  /* `:bad-pseudoclass` is invalid, invalidating this style block */
}

Pseudo-class :is() và :where() có thể được dùng để tạo forgiving selector list.

Relative selector

Relative selector là selector đại diện cho một phần tử tương đối so với một hoặc nhiều phần tử neo đứng trước combinator. Relative selector không bắt đầu bằng combinator tường minh sẽ có descendant combinator ngầm định.

Relative selector không thể dùng trong selector list. Thay vào đó, nó được chấp nhận trong một số ngữ cảnh nhất định, chẳng hạn như pseudo-class :has().

:has(+ div#topic > #reference) {
}

:has(> .icon) {
}

dt:has(+ img) ~ dd {
}

Đặc tả kỹ thuật

Xem thêm

• CSS selectors and combinators
• Forgiving selector list
• Document.querySelector()
• Document.querySelectorAll()
• CSS selectors module
• CSS pseudo-elements module