Setiap pemilih CSS yang biasa, disusun mengikut keluarga: asas, penggabung, pseudo-class, pseudo-element dan pemilih atribut. Setiap baris memadankan pemilih dengan contoh satu baris.
Pemilih memilih elemen yang dikenakan peraturan. Kekhususan (specificity) menentukan peraturan mana yang menang apabila beberapa padan: inline mengatasi id, id mengatasi class, class mengatasi jenis. Baca pemilih dari kanan ke kiri: pelayar memadankan bahagian paling kanan dahulu, kemudian menaiki penggabung. Keluarga di bawah merangkumi hampir semua yang akan anda tulis.
Jadual rujukan · 53 entri
Pemilih CSSExplained
53 of 53 rows
Asas
Setiap elemen dengan tag tersebut.
button { }
Elemen dengan class tersebut.
.active { }
Satu-satunya elemen dengan id tersebut.
#header { }
Setiap elemen.
* { box-sizing: border-box; }
Akar dokumen; tempat biasa untuk custom property global.
:root { --gap: 1rem; }
Elemen yang dipadankan oleh A atau B (pengumpulan).
h1, h2, h3 { }
Penggabung
Sebarang B yang diturunkan daripada A.
nav a { }
B yang merupakan anak langsung A.
ul > li { }
B serta-merta selepas A, dengan induk sama.
h1 + p { }
Setiap B yang mengikuti A, dengan induk sama.
h1 ~ p { }
Pseudo-class (keadaan)
Elemen semasa penunjuk berada di atasnya.
a:hover { }
Elemen yang mempunyai fokus papan kekunci.
input:focus { }
Elemen yang merupakan anak pertama induknya.
li:first-child { }
Anak ke-n; menerima formula seperti 2n.
tr:nth-child(2n) { }
Elemen yang tidak memadankan sebarang pemilih dalaman; menerima senarai sejak Selectors 4.
li:not(:first-child, .skip) { }
Kotak semak, radio atau pilihan yang ditanda.
input:checked { }
Input atau butang yang dilumpuhkan.
button:disabled { }
Induk yang mengandungi padanan untuk pemilih dalaman.
li:has(ul) { }
Sebarang pemilih dalam senarai; kekhususannya ialah yang tertinggi dalam senarai.
:is(ol, ul) li { }
Sama seperti :is(), tetapi dengan kekhususan sifar.
:where(ol, ul) li { }
Fokus yang patut menunjukkan cincin, biasanya daripada papan kekunci.
a:focus-visible { }
Elemen yang dirinya sendiri atau keturunannya mempunyai fokus.
form:focus-within { }
Elemen yang merupakan anak terakhir induknya.
li:last-child { }
Elemen tanpa sibling.
p:only-child { }
Sibling ke-n dengan tag yang sama; menerima formula seperti 2n.
p:nth-of-type(2n) { }
Sibling pertama atau terakhir dengan tag yang sama.
p:first-of-type { }
Elemen tanpa anak dan tanpa teks.
td:empty { }
Pautan yang belum dilawati dan yang sudah dilawati.
a:visited { }
Input yang ditanda wajib dan input yang dibiarkan pilihan.
input:required { }
Input yang nilainya lulus atau gagal peraturan pengesahannya.
input:invalid { }
Input yang tidak boleh diedit oleh pengguna.
input:read-only { }
Elemen yang id-nya sepadan dengan serpihan URL.
#note:target { }
Pilihan yang dipilih awal atau butang lalai bagi satu kumpulan.
input:default { }
Kotak semak yang ditetapkan kepada keadaan tak tentu oleh skrip.
input:indeterminate { }
Sebarang elemen terbina dalam, atau elemen tersuai setelah didaftarkan.
my-widget:defined { }
Elemen dalam bahasa yang diberikan.
p:lang(fr) { }
Pseudo-element
Nod kandungan terjana sebelum elemen.
label::before { content: ""; }
Nod kandungan terjana selepas elemen.
code::after { content: ";"; }
Huruf pertama bagi blok teks.
p::first-letter { }
Teks pemegang tempat bagi input.
input::placeholder { }
Baris pertama bagi blok teks.
p::first-line { }
Teks yang diserlahkan oleh pengguna.
::selection { }
Peluru atau nombor bagi item senarai.
li::marker { }
Kawasan di belakang elemen skrin penuh atau dialog.
dialog::backdrop { }
Butang layari di dalam input fail.
input::file-selector-button { }
Bahagian shadow DOM yang didedahkan oleh hosnya.
my-widget::part(header) { }
Pemilih atribut
Elemen yang mempunyai atribut itu, dengan nilai apa pun.
[required] { }
Atribut sama tepat dengan val.
[type="submit"] { }
Atribut bermula dengan val.
a[href^="https"] { }
Atribut berakhir dengan val.
a[href$=".pdf"] { }
Atribut mengandungi val.
a[href*="login"] { }
Senarai dipisah ruang yang mengandungi val.
[class~="badge"] { }
Nilainya sama dengan val, atau bermula dengan val diikuti tanda sempang.