CSS Pseudo-kelas
«Sebelumnya
Tonton video tutorial ini
Next Chapter »
Apa Pseudo-kelas?
Sebuah pseudo-class digunakan untuk mendefinisikan keadaan khusus dari suatu unsur.
Sebagai contoh, dapat digunakan untuk:
Gaya elemen ketika mouse pengguna di atasnya
Gaya dikunjungi dan belum dikunjungi link berbeda
sintaksis
Sintaks pseudo-kelas:
pemilih: pseudo-class {
property: value;
}
Jangkar Pseudo-kelas
Link dapat ditampilkan dengan cara yang berbeda:
contoh
/ * Link yang belum dikunjungi * /
a: link {
color: # FF0000;
}
/ * Link yang dikunjungi * /
a: visited {
color: # 00FF00;
}
/ * Mouse pada link * /
a: hover {
color: # FF00FF;
}
/ * Link yang dipilih * /
a: active {
color: # 0000FF;
}
Cobalah sendiri »
Catatan Catatan: a: hover harus datang setelah a: link dan a: visited dalam definisi CSS agar efektif !!
a: aktif harus datang setelah: hover dalam definisi CSS agar efektif !!
Nama Pseudo-class yang tidak case-sensitive.
Pseudo-kelas dan Kelas CSS
Pseudo-class dapat dikombinasikan dengan kelas CSS:
contoh
a.highlight: hover {
color: # ff0000;
}
Cobalah sendiri »
Ketika Anda membawa lebih dari link dalam contoh, ia akan berubah warna.
CSS - The: pertama-anak Pseudo-class
The: pertama-anak pseudo-class cocok dengan elemen tertentu yang merupakan anak pertama dari elemen lain.
Catatan Catatan: Untuk: pertama-anak untuk bekerja di IE8 dan sebelumnya, <! DOCTYPE> harus dinyatakan.
Cocokkan pertama <p> elemen
Pada contoh berikut, pemilih cocok dengan <p> unsur yang merupakan anak pertama dari setiap elemen:
contoh
p: pertama-anak {
warna: biru;
}
Cobalah sendiri »
Cocokkan pertama <i> elemen dalam semua <p> elemen
Pada contoh berikut, pemilih cocok pertama <i> elemen dalam semua <p> elemen:
contoh
p i: pertama-anak {
warna: biru;
}
Cobalah sendiri »
Cocok dengan semua <i> elemen dalam semua anak pertama <p> elemen
Pada contoh berikut, pemilih cocok dengan semua <i> elemen dalam <p> elemen yang merupakan anak pertama dari elemen lain:
contoh
p: pertama-anak saya {
warna: biru;
}
Cobalah sendiri »
CSS - The: lang Pseudo-class
The: lang pseudo-class memungkinkan Anda untuk menentukan peraturan khusus untuk bahasa yang berbeda.
Catatan Catatan: IE8 mendukung: lang pseudo-class hanya jika <DOCTYPE!> Ditentukan.
Pada contoh di bawah ini,: kelas lang mendefinisikan tanda kutip untuk elemen q dengan lang = "no":
contoh
<html>
<head>
<style>
q: lang (no) {
mengutip: "~" "~";
}
</ style>
</ head>
<body>
<p> Beberapa teks <q lang = "no"> Sebuah kutipan dalam paragraf </ q> Beberapa teks </ p>.
</ body>
</ html>
«Sebelumnya
Tonton video tutorial ini
Next Chapter »
Apa Pseudo-kelas?
Sebuah pseudo-class digunakan untuk mendefinisikan keadaan khusus dari suatu unsur.
Sebagai contoh, dapat digunakan untuk:
Gaya elemen ketika mouse pengguna di atasnya
Gaya dikunjungi dan belum dikunjungi link berbeda
sintaksis
Sintaks pseudo-kelas:
pemilih: pseudo-class {
property: value;
}
Jangkar Pseudo-kelas
Link dapat ditampilkan dengan cara yang berbeda:
contoh
/ * Link yang belum dikunjungi * /
a: link {
color: # FF0000;
}
/ * Link yang dikunjungi * /
a: visited {
color: # 00FF00;
}
/ * Mouse pada link * /
a: hover {
color: # FF00FF;
}
/ * Link yang dipilih * /
a: active {
color: # 0000FF;
}
Cobalah sendiri »
Catatan Catatan: a: hover harus datang setelah a: link dan a: visited dalam definisi CSS agar efektif !!
a: aktif harus datang setelah: hover dalam definisi CSS agar efektif !!
Nama Pseudo-class yang tidak case-sensitive.
Pseudo-kelas dan Kelas CSS
Pseudo-class dapat dikombinasikan dengan kelas CSS:
contoh
a.highlight: hover {
color: # ff0000;
}
Cobalah sendiri »
Ketika Anda membawa lebih dari link dalam contoh, ia akan berubah warna.
CSS - The: pertama-anak Pseudo-class
The: pertama-anak pseudo-class cocok dengan elemen tertentu yang merupakan anak pertama dari elemen lain.
Catatan Catatan: Untuk: pertama-anak untuk bekerja di IE8 dan sebelumnya, <! DOCTYPE> harus dinyatakan.
Cocokkan pertama <p> elemen
Pada contoh berikut, pemilih cocok dengan <p> unsur yang merupakan anak pertama dari setiap elemen:
contoh
p: pertama-anak {
warna: biru;
}
Cobalah sendiri »
Cocokkan pertama <i> elemen dalam semua <p> elemen
Pada contoh berikut, pemilih cocok pertama <i> elemen dalam semua <p> elemen:
contoh
p i: pertama-anak {
warna: biru;
}
Cobalah sendiri »
Cocok dengan semua <i> elemen dalam semua anak pertama <p> elemen
Pada contoh berikut, pemilih cocok dengan semua <i> elemen dalam <p> elemen yang merupakan anak pertama dari elemen lain:
contoh
p: pertama-anak saya {
warna: biru;
}
Cobalah sendiri »
CSS - The: lang Pseudo-class
The: lang pseudo-class memungkinkan Anda untuk menentukan peraturan khusus untuk bahasa yang berbeda.
Catatan Catatan: IE8 mendukung: lang pseudo-class hanya jika <DOCTYPE!> Ditentukan.
Pada contoh di bawah ini,: kelas lang mendefinisikan tanda kutip untuk elemen q dengan lang = "no":
contoh
<html>
<head>
<style>
q: lang (no) {
mengutip: "~" "~";
}
</ style>
</ head>
<body>
<p> Beberapa teks <q lang = "no"> Sebuah kutipan dalam paragraf </ q> Beberapa teks </ p>.
</ body>
</ html>
Tidak ada komentar:
Posting Komentar