referensi CSS w3ii 'diuji secara teratur dengan semua browser utama.
CSS Selectors
Dalam CSS, penyeleksi pola yang digunakan untuk memilih element(s) Anda ingin bergaya.
The "CSS" kolom menunjukkan di mana CSS versi properti didefinisikan (CSS1, CSS2, or CSS3) .
| Pemilih | Contoh | deskripsi contoh | CSS |
|---|---|---|---|
| . class | .intro | Memilih semua elemen dengan class="intro" | 1 |
| # id | #firstname | Memilih elemen dengan id="firstname" | 1 |
| * | * | Memilih semua elemen | 2 |
| element | p | Memilih semua <p> elemen | 1 |
| element,element | div, p | Memilih semua <div> elemen dan semua <p> elemen | 1 |
| element element | div p | Memilih semua <p> elemen di dalam <div> elemen | 1 |
| element > element | div > p | Memilih semua <p> elemen mana orangtua adalah <div> elemen | 2 |
| element + element | div + p | Memilih semua <p> elemen yang ditempatkan segera setelah <div> elemen | 2 |
| element1 ~ element2 | p ~ ul | Memilih setiap <ul> elemen yang didahului oleh <p> elemen | 3 |
| [ attribute ] | [target] | Memilih semua elemen dengan atribut target | 2 |
| [ attribute = value ] | [target=_blank] | Memilih semua elemen dengan target="_blank" | 2 |
| [ attribute ~= value ] | [title~=flower] | Memilih semua elemen dengan atribut judul mengandung kata "flower" | 2 |
| [ attribute |= value ] | [lang|=en] | Memilih semua elemen dengan nilai atribut lang dimulai dengan "en" | 2 |
| [ attribute ^= value ] | a[href^="https"] | Memilih setiap <a> elemen yang href nilai atribut dimulai dengan "https" | 3 |
| [ attribute $= value ] | a[href$=".pdf"] | Memilih setiap <a> elemen yang nilainya atribut href berakhir dengan ".pdf" | 3 |
| [ attribute *= value ] | a[href*="w3ii"] | Memilih setiap <a> elemen yang href nilai atribut berisi substring "w3ii" | 3 |
| :active | a:active | Memilih link aktif | 1 |
| ::after | p::after | Memasukkan sesuatu setelah isi setiap <p> elemen | 2 |
| ::before | p::before | Memasukkan sesuatu sebelum isi setiap <p> elemen | 2 |
| :checked | input:checked | Memilih setiap diperiksa <input> elemen | 3 |
| :disabled | input:disabled | Memilih setiap cacat <input> elemen | 3 |
| :empty | p:empty | Memilih setiap <p> elemen yang tidak memiliki anak (including text nodes) | 3 |
| :enabled | input:enabled | Memilih setiap diaktifkan <input> elemen | 3 |
| :first-child | p:first-child | Memilih setiap <p> unsur yang merupakan anak pertama dari induknya | 2 |
| ::first-letter | p::first-letter | Memilih huruf pertama dari setiap <p> elemen | 1 |
| ::first-line | p::first-line | Memilih baris pertama dari setiap <p> elemen | 1 |
| :first-of-type | p:first-of-type | Memilih setiap <p> unsur yang pertama <p> unsur induknya | 3 |
| :focus | input:focus | Memilih elemen input yang memiliki fokus | 2 |
| :hover | a:hover | Memilih link pada mouse | 1 |
| :in-range | input:in-range | Memilih elemen input dengan nilai dalam kisaran tertentu | 3 |
| :invalid | input:invalid | Memilih semua elemen input dengan nilai yang tidak valid | 3 |
| :lang( language ) | p:lang(it) | Akan memilih setiap <p> elemen dengan lang atribut sama dengan "it" (Italian) | 2 |
| :last-child | p:last-child | Memilih setiap <p> unsur yang merupakan anak terakhir dari induknya | 3 |
| :last-of-type | p:last-of-type | Memilih setiap <p> unsur yang terakhir <p> unsur induknya | 3 |
| :link | a:link | Memilih semua link yang belum dikunjungi | 1 |
| :not( selector ) | :not(p) | Memilih setiap elemen yang tidak <p> elemen | 3 |
| :nth-child( n ) | p:nth-child(2) | Memilih setiap <p> unsur yang merupakan anak kedua dari induknya | 3 |
| :nth-last-child( n ) | p:nth-last-child(2) | Memilih setiap <p> unsur yang merupakan anak kedua dari induknya, menghitung dari anak terakhir | 3 |
| :nth-last-of-type( n ) | p:nth-last-of-type(2) | Memilih setiap <p> unsur yang kedua <p> unsur induknya, menghitung dari anak terakhir | 3 |
| :nth-of-type( n ) | p:nth-of-type(2) | Memilih setiap <p> unsur yang kedua <p> unsur induknya | 3 |
| :only-of-type | p:only-of-type | Memilih setiap <p> unsur yang merupakan satu-satunya <p> unsur induknya | 3 |
| :only-child | p:only-child | Memilih setiap <p> unsur yang merupakan satu-satunya anak dari induknya | 3 |
| :optional | input:optional | Memilih elemen masukan tanpa "required" atribut | 3 |
| :out-of-range | input:out-of-range | Memilih elemen input dengan nilai luar kisaran tertentu | 3 |
| :read-only | input:read-only | Memilih elemen input dengan "readonly" atribut tertentu | 3 |
| :read-write | input:read-write | Memilih elemen input dengan "readonly" atribut TIDAK ditentukan | 3 |
| :required | input:required | Memilih elemen input dengan "required" atribut tertentu | 3 |
| :root | :root | Memilih elemen root dokumen ini | 3 |
| ::selection | ::selection | Memilih bagian dari suatu unsur yang dipilih oleh pengguna | |
| :target | #news:target | Memilih elemen #news aktif saat ini (diklik pada URL yang berisi nama anchor) | 3 |
| :valid | input:valid | Memilih semua elemen input dengan nilai yang valid | 3 |
| :visited | a:visited | Memilih semua link yang dikunjungi | 1 |