Setiap selektor CSS yang umum, dikelompokkan per keluarga: dasar, kombinator, pseudo-class, pseudo-element, dan selektor atribut. Setiap baris memasangkan selektor dengan contoh satu baris.
Selektor memilih elemen yang dikenai suatu aturan. Spesifisitas menentukan aturan mana yang menang bila beberapa cocok: inline mengalahkan id, id mengalahkan class, class mengalahkan tipe. Baca selektor dari kanan ke kiri: browser mencocokkan bagian paling kanan lebih dulu, lalu menaiki kombinatornya. Keluarga di bawah mencakup hampir semua yang akan Anda tulis.
Tabel referensi · 53 entri
Selektor CSSExplained
53 of 53 rows
Dasar
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 lazim untuk custom property global.
:root { --gap: 1rem; }
Elemen yang cocok dengan A atau B (pengelompokan).
h1, h2, h3 { }
Kombinator
Semua B yang merupakan turunan A.
nav a { }
B yang merupakan anak langsung dari A.
ul > li { }
B tepat setelah A, dengan induk yang sama.
h1 + p { }
Setiap B yang mengikuti A, dengan induk yang sama.
h1 ~ p { }
Pseudo-class (status)
Elemen saat pointer berada di atasnya.
a:hover { }
Elemen yang sedang menerima fokus keyboard.
input:focus { }
Elemen yang merupakan anak pertama dari induknya.
li:first-child { }
Anak ke-n; menerima rumus seperti 2n.
tr:nth-child(2n) { }
Elemen yang tidak cocok dengan selektor di dalamnya; menerima daftar sejak Selectors 4.
li:not(:first-child, .skip) { }
Checkbox, radio, atau opsi yang dicentang.
input:checked { }
Input atau tombol yang dinonaktifkan.
button:disabled { }
Induk yang memuat kecocokan untuk selektor di dalamnya.
li:has(ul) { }
Selektor mana pun dalam daftar; spesifisitasnya adalah yang tertinggi dalam daftar.
:is(ol, ul) li { }
Sama seperti :is(), tetapi dengan spesifisitas nol.
:where(ol, ul) li { }
Fokus yang seharusnya menampilkan cincin, biasanya dari keyboard.
a:focus-visible { }
Elemen yang dirinya sendiri atau salah satu turunannya memiliki fokus.
form:focus-within { }
Elemen yang merupakan anak terakhir dari induknya.
li:last-child { }
Elemen tanpa saudara.
p:only-child { }
Saudara ke-n dengan tag yang sama; menerima rumus seperti 2n.
p:nth-of-type(2n) { }
Saudara pertama atau terakhir dengan tag yang sama.
p:first-of-type { }
Elemen tanpa anak dan tanpa teks.
td:empty { }
Tautan yang belum dikunjungi dan yang sudah dikunjungi.
a:visited { }
Input yang ditandai wajib dan input yang dibiarkan opsional.
input:required { }
Input yang nilainya lolos atau gagal aturan validasinya.
input:invalid { }
Input yang tidak dapat diedit pengguna.
input:read-only { }
Elemen yang id-nya cocok dengan fragmen URL.
#note:target { }
Opsi yang dipilih lebih dulu atau tombol bawaan dari suatu grup.
input:default { }
Checkbox yang disetel ke keadaan tak tentu oleh skrip.
input:indeterminate { }
Elemen bawaan apa pun, atau elemen kustom setelah terdaftar.
my-widget:defined { }
Elemen dalam bahasa yang diberikan.
p:lang(fr) { }
Pseudo-element
Simpul konten yang dihasilkan sebelum elemen.
label::before { content: ""; }
Simpul konten yang dihasilkan setelah elemen.
code::after { content: ";"; }
Huruf pertama dari sebuah blok teks.
p::first-letter { }
Teks placeholder dari sebuah input.
input::placeholder { }
Baris pertama dari sebuah blok teks.
p::first-line { }
Teks yang disorot pengguna.
::selection { }
Bullet atau angka dari sebuah item daftar.
li::marker { }
Area di belakang elemen layar penuh atau dialog.
dialog::backdrop { }
Tombol telusuri di dalam input berkas.
input::file-selector-button { }
Bagian shadow DOM yang diekspos oleh hostnya.
my-widget::part(header) { }
Selektor atribut
Elemen yang memiliki atribut tersebut, dengan nilai apa pun.
[required] { }
Atribut sama persis dengan val.
[type="submit"] { }
Atribut diawali val.
a[href^="https"] { }
Atribut diakhiri val.
a[href$=".pdf"] { }
Atribut mengandung val.
a[href*="login"] { }
Daftar yang dipisah spasi dan memuat val.
[class~="badge"] { }
Nilainya sama dengan val, atau diawali val disertai tanda hubung.