CSS Selektor
CSS Selektor
Mesin selektor mengurai teks selektor CSS menjadi bentuk terstruktur dan mengevaluasinya terhadap pohon DOM. Ia mendukung baik kueri langsung maupun pencocokan aturan cascade.
Menjalankan Selektor
select() mengevaluasi sebuah selektor terhadap sebuah pohon dan mengembalikan kecocokan; element_matches() menguji satu elemen. Keduanya menerima sintaks selektor standar — tipe, kelas, id, atribut, dan pseudo-kelas, termasuk kombinasi majemuk dan kompleks.
Struktur Selektor Terurai
parse() menghasilkan sebuah SelectorList dari ComplexSelector dan entri CompoundSelector yang dibangun dari TypeSelector, ClassSelector, IDSelector, AttributeSelector (dengan AttributeOperator), UniversalSelector, dan Combinator.
Pseudo-Kelas
Pseudo-kelas fungsional dimodelkan secara eksplisit: IsPseudoClass, WherePseudoClass, HasPseudoClass, ComplexNotPseudoClass, dan varian struktural nth-child melalui NthFilteredChildPseudoClass dengan NthArgument.
Specificity
specificity() menghitung tuple tiga komponen standar untuk sebuah selector, dan max_specificity() mengurangi sebuah daftar; match() menggabungkan parsing dan evaluasi bersama. Nilai-nilai ini sama dengan yang digunakan oleh cascade, sehingga hasil query dan gaya yang dihitung selalu cocok.
Tips dan Praktik Terbaik
- Gunakan
element_matches()di dalam filter alih-alih menjalankan ulangselect()per elemen - Parse sekali dan gunakan kembali
SelectorListketika selector yang sama dijalankan pada banyak pohon - Ketika sebuah aturan secara tak terduga kehilangan cascade, bandingkan nilai
specificity()secara langsung
Masalah Umum
| Masalah | Penyebab | Perbaikan |
|---|---|---|
| Selektor tidak menemukan apa pun | Kesalahan sintaks dalam teks selektor | parse() memunculkan melalui syntax_error — periksa pesan |
| Ikatan dengan spesifisitas yang sama menghasilkan “salah” | Ketergantungan urutan | Aturan yang lebih belakangan menang dalam seri; periksa urutan aturan |
:is() vs :where() kebingungan | :where() menyumbang spesifisitas nol | Pilih sesuai bobot cascade yang diinginkan |
FAQ
Bagaimana cara menguji satu elemen terhadap sebuah selector?
element_matches() — ia mengembalikan boolean tanpa memindai pohon.
Bagaimana spesifisitas dihitung?
specificity() mengembalikan tuple komponen standar (id, class, type); grup :where() memberikan nol.
Pseudo-class apa yang didukung?
Bentuk terstruktur dalam API: :is(), :where(), :has(), :not() dengan argumen kompleks, dan selector struktural gaya nth-child.
Ringkasan API Reference
| Kelas/Metode | Deskripsi |
|---|---|
select | Evaluasi selector terhadap pohon |
element_matches | Uji satu elemen |
parse | Uraikan teks selector menjadi SelectorList |
specificity | Hitung tupel spesifisitas |
HasPseudoClass | Bentuk :has() terstruktur |
AttributeSelector | Pencocok atribut dengan operator |