CSS elemen
17/04/2012 19:23
CSS Selectors
Dalam CSS, penyeleksi adalah pola yang digunakan untuk memilih elemen (s) Anda ingin bergaya.
The "CSS" kolom menunjukkan di mana CSS versi properti didefinisikan (CSS1, CSS2, atau CSS3).
Pemilih | Contoh | Contoh deskripsi | CSS |
---|---|---|---|
. kelas | .intro | Pilih semua elemen dengan class = "intro" | 1 |
# id | #firstname | Memilih elemen dengan id = "Nama depan" | 1 |
* | * | Pilih semua elemen | 2 |
elemen | p | Pilih semua elemen <p> | 1 |
elemen, elemen | div,p | Pilih semua elemen <div> dan semua unsur <p> | 1 |
elemen elemen | div p | Memilih elemen <p> semua di dalam elemen <div> | 1 |
unsur > elemen | div>p | Pilih semua elemen <p> mana orangtua adalah elemen <div> | 2 |
unsur + unsur | div+p | Memilih elemen <p> semua yang ditempatkan segera setelah elemen <div> | 2 |
[ atribut ] | [target] | Pilih semua elemen dengan atribut target | 2 |
[ atribut = nilai ] | [target=_blank] | Pilih semua elemen dengan target = "_blank" | 2 |
[ atribut ~ = nilai ] | [title~=flower] | Pilih semua elemen dengan atribut judul yang mengandung kata "bunga" | 2 |
[ atribut | = nilai ] | [lang|=en] | Pilih semua elemen dengan nilai atribut lang dimulai dengan "en" | 2 |
: Link | a:link | Pilih semua link yang belum dikunjungi | 1 |
: Visited | a:visited | Pilih semua link yang dikunjungi | 1 |
: Aktif | a:active | Memilih link aktif | 1 |
: Hover | a:hover | Memilih link pada mouse | 1 |
: Fokus | input:focus | Memilih elemen input yang memiliki fokus | 2 |
: Pertama-surat | p:first-letter | Memilih huruf pertama dari setiap elemen <p> | 1 |
: Lini pertama | p:first-line | Memilih baris pertama dari setiap elemen <p> | 1 |
: Pertama-anak | p:first-child | Memilih setiap elemen <p> yang merupakan anak pertama dari induknya | 2 |
: Sebelum | p:before | Memasukkan konten sebelum setiap elemen <p> | 2 |
: Setelah | p:after | Memasukkan konten setelah setiap elemen <p> | 2 |
: Lang ( bahasa ) | p:lang(it) | Memilih setiap elemen <p> dengan nilai atribut lang dimulai dengan "itu" | 2 |
element1 ~element2 | p ~ ul | Memilih setiap elemen <ul> yang didahului oleh elemen <p> | 3 |
[ atribut ^ = nilai ] | a [src = ^ "https"] | Memilih setiap elemen <a> yang src atribut nilai dimulai dengan "https" | 3 |
[ atribut $ = nilai ] | a [src $ = "pdf."] | Memilih setiap elemen <a> yang src nilai atribut diakhiri dengan ". Pdf" | 3 |
[ atribut * = nilai ] | a [* src = "W3Schools"] | Memilih setiap elemen <a> yang src nilai atribut berisi substring "W3Schools" | 3 |
: Pertama-of-jenis | t: pertama-of-jenis | Memilih setiap elemen <p> yang adalah elemen <p> pertama dari induknya | 3 |
: Lalu-of-jenis | t: lalu-of-jenis | Memilih setiap elemen <p> bahwa adalah unsur <p> terakhir dari induknya | 3 |
: Hanya-of-jenis | p: hanya-of-jenis | Memilih setiap elemen <p> bahwa adalah unsur <p> hanya dari induknya | 3 |
: Hanya-anak | p: hanya-anak | Memilih setiap elemen <p> yang merupakan anak tunggal dari induknya | 3 |
: Nth-anak ( n ) | p: nth-anak (2) | Memilih setiap elemen <p> yang merupakan anak kedua dari induknya | 3 |
: Nth-terakhir-anak (n ) | p: nth-terakhir-anak (2) | Memilih setiap elemen <p> yang merupakan anak kedua dari induknya, dihitung dari anak terakhir | 3 |
: N-of-jenis ( n ) | t: n-of-tipe (2) | Memilih setiap elemen <p> bahwa adalah unsur <p> kedua induknya | 3 |
: Nth-terakhir-dari-jenis ( n ) | p: nth-terakhir-dari-jenis (2) | Memilih setiap elemen <p> bahwa adalah unsur <p> kedua induknya, dihitung dari anak terakhir | 3 |
: Terakhir-anak | t: terakhir-anak | Memilih setiap elemen <p> yang adalah anak terakhir dari induknya | 3 |
: Root | : Root | Memilih elemen root dokumen | 3 |
: Kosong | t: kosong | Memilih setiap elemen <p> yang tidak memiliki anak (termasuk node teks) | 3 |
: Target | # Berita: target | Memilih elemen # berita saat ini aktif (mengklik URL yang berisi bahwa nama jangkar) | 3 |
: Diaktifkan | input: diaktifkan | Memilih setiap elemen <input> diaktifkan | 3 |
: Dinonaktifkan | input: dinonaktifkan | Memilih setiap elemen <input> cacat | 3 |
: Checked | masukan: checked | Memilih setiap elemen <input> diperiksa | 3 |
: Tidak ( pemilih ) | : Tidak (p) | Memilih setiap elemen yang bukan elemen <p> | 3 |
:: Seleksi | :: Seleksi | Memilih bagian dari elemen yang dipilih oleh pengguna | 3 |