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 ulang select() per elemen
  • Parse sekali dan gunakan kembali SelectorList ketika selector yang sama dijalankan pada banyak pohon
  • Ketika sebuah aturan secara tak terduga kehilangan cascade, bandingkan nilai specificity() secara langsung

Masalah Umum

MasalahPenyebabPerbaikan
Selektor tidak menemukan apa punKesalahan sintaks dalam teks selektorparse() memunculkan melalui syntax_error — periksa pesan
Ikatan dengan spesifisitas yang sama menghasilkan “salah”Ketergantungan urutanAturan yang lebih belakangan menang dalam seri; periksa urutan aturan
:is() vs :where() kebingungan:where() menyumbang spesifisitas nolPilih 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/MetodeDeskripsi
selectEvaluasi selector terhadap pohon
element_matchesUji satu elemen
parseUraikan teks selector menjadi SelectorList
specificityHitung tupel spesifisitas
HasPseudoClassBentuk :has() terstruktur
AttributeSelectorPencocok atribut dengan operator

Lihat Juga

 Bahasa Indonesia