2. Kelas semu dan elemen semu
A. Pemilih turunan setelah :hover
Contoh
| a: rentang arahkan kursor { warna: #0f0; } |
menggambarkan
Sebuah elemen dapat diposisikan oleh pemilih yang mengikuti kelas semu :hover, sama seperti pemilih turunan. Contoh di atas akan mengubah warna teks pada elemen span di dalam elemen a ketika mouse diarahkan.
Status dukungan
| IE6 Tidak IE7 Ya IE8 Ya |
B. Rantai kelas semu
Contoh
| a:anak pertama:hover { warna: #0f0; } |
menggambarkan
Kelas semu dapat dirantai ke pemilihan elemen yang sempit. Contoh di atas akan menemukan tag a pertama di bawah setiap elemen induk dan menerapkan hover pseudo-class P ke dalamnya.
Status dukungan
| IE6 Tidak IE7 Ya IE8 Ya |
C. :arahkan kursor ke elemen non-jangkar
Contoh
| div: arahkan kursor { warna: #f00; } |
menggambarkan
Kelas semu :hover dapat diterapkan pada status hover elemen apa pun, bukan hanya tag.
Status dukungan
| IE6 Tidak IE7 Ya IE8 Ya |
D. : kelas semu anak pertama
Contoh
| div li:anak pertama { latar belakang: biru; } |
menggambarkan
Ubah kelas semu untuk menemukan elemen anak pertama dari elemen induk dari setiap elemen yang ditentukan.
Status dukungan
| IE6 Tidak IE7 Ya IE8 Ya |
Bug
Di IE7, jika ada komentar HTML sebelum elemen anak pertama diposisikan, kelas semu anak pertama akan menjadi tidak valid.
E. :fokus kelas semu
Contoh
| a: fokus { batas: 1px merah solid; } |
menggambarkan
Kelas semu ini menempatkan semua elemen yang memiliki fokus keyboard.
Status dukungan
| IE6 Tidak IE7Tidak IE8 Ya |
F. :sebelum dan :setelah kelas semu
Contoh
| #kotak:sebelum { isi: "Teks ini ada di depan kotak"; } #kotak:setelah { isi: "Teks ini ada di belakang kotak"; } |
menggambarkan
Kedua elemen semu ini masing-masing menambahkan konten yang dihasilkan sebelum dan sesudah elemen yang ditentukan, dan digunakan bersama dengan atribut konten.
Status dukungan
| IE6 Tidak IE7Tidak IE8 Ya |
3. Dukungan atribut
A. Ukuran sebenarnya yang dihasilkan berdasarkan posisi
Contoh
| #kotak { posisi: mutlak; atas: 0; kanan: 100 piksel; kiri: 0; bawah: 200 piksel; latar belakang: biru; } |
menggambarkan
Mendefinisikan nilai atas, kanan, bawah, dan kiri untuk elemen yang diposisikan secara absolut akan memberikan elemen tersebut ukuran sebenarnya (lebar dan tinggi), meskipun tidak ada nilai lebar dan tinggi yang ditetapkan.
Status dukungan
| IE6 Tidak IE7 Ya IE8 Ya |
B. Tinggi Min dan Lebar Min
Contoh
| #kotak { tinggi minimum: 500 piksel; lebar minimum: 300 piksel; } |
menggambarkan
Kedua properti ini masing-masing menentukan lebar dan tinggi minimum elemen, sehingga memungkinkan kotak lebih besar dari nilai minimum yang ditentukan, namun tidak lebih kecil. Mereka dapat digunakan bersama-sama atau terpisah.
Status dukungan
| IE6 Tidak IE7 Ya IE8 Ya |
C. Tinggi Maks dan Lebar Maks
Contoh
| #kotak { tinggi maksimal: 500 piksel; lebar maksimal: 300 piksel; } |
menggambarkan
Kedua properti ini masing-masing menentukan tinggi dan lebar maksimum elemen. Kotak boleh lebih kecil dari nilai maksimum yang ditentukan, namun tidak boleh lebih besar. Mereka juga dapat digunakan bersama-sama atau sendiri-sendiri.
Status dukungan
| IE6 Tidak IE7 Ya IE8 Ya |