CSS - Kelas Pseudo
Kelas semu CSS digunakan untuk menambahkan efek khusus ke beberapa penyeleksi. Anda tidak perlu menggunakan JavaScript atau skrip lain untuk menggunakan efek tersebut. Sintaks sederhana pseudo-class adalah sebagai berikut -
selector:pseudo-class {property: value}Kelas CSS juga dapat digunakan dengan kelas semu -
selector.class:pseudo-class {property: value}Pseudo-class yang paling umum digunakan adalah sebagai berikut -
| Sr.No. | Nilai & Deskripsi |
|---|---|
| 1 | :link Gunakan kelas ini untuk menambahkan gaya khusus ke link yang belum dikunjungi. |
| 2 | :visited Gunakan kelas ini untuk menambahkan gaya khusus ke link yang dikunjungi. |
| 3 | :hover Gunakan kelas ini untuk menambahkan gaya khusus ke elemen saat Anda mengarahkan mouse di atasnya. |
| 4 | :active Gunakan kelas ini untuk menambahkan gaya khusus ke elemen aktif. |
| 5 | :focus Gunakan kelas ini untuk menambahkan gaya khusus ke elemen saat elemen memiliki fokus. |
| 6 | :first-child Gunakan kelas ini untuk menambahkan gaya khusus ke elemen yang merupakan anak pertama dari beberapa elemen lainnya. |
| 7 | :lang Gunakan kelas ini untuk menentukan bahasa yang akan digunakan dalam elemen tertentu. |
Saat mendefinisikan pseudo-class dalam blok <style> ... </style>, hal-hal berikut harus diperhatikan -
a: hover HARUS muncul setelah: link dan a: dikunjungi dalam definisi CSS agar efektif.
a: aktif HARUS muncul setelah: hover dalam definisi CSS agar efektif.
Nama kelas semu tidak peka huruf besar kecil.
Kelas pseudo berbeda dari kelas CSS tetapi mereka dapat digabungkan.
Pseudo-class: link
Contoh berikut menunjukkan cara menggunakan kelas : link untuk menyetel warna link. Nilai yang memungkinkan dapat berupa nama warna apa pun dalam format apa pun yang valid.
<html>
<head>
<style type = "text/css">
a:link {color:#000000}
</style>
</head>
<body>
<a href = "">Black Link</a>
</body>
</html>Ini akan menghasilkan tautan hitam berikut -
Kelas semu: dikunjungi
Berikut ini adalah contoh yang mendemonstrasikan cara menggunakan kelas yang dikunjungi untuk menyetel warna tautan yang dikunjungi. Nilai yang memungkinkan dapat berupa nama warna apa pun dalam format apa pun yang valid.
<html>
<head>
<style type = "text/css">
a:visited {color: #006600}
</style>
</head>
<body>
<a href = "">Click this link</a>
</body>
</html>Ini akan menghasilkan tautan berikut. Setelah Anda mengklik tautan ini, itu akan berubah warna menjadi hijau.
Pseudo-class: hover
Contoh berikut menunjukkan cara menggunakan kelas : hover untuk mengubah warna tautan saat kita mengarahkan penunjuk mouse ke tautan itu. Nilai yang memungkinkan dapat berupa nama warna apa pun dalam format apa pun yang valid.
<html>
<head>
<style type = "text/css">
a:hover {color: #FFCC00}
</style>
</head>
<body>
<a href = "">Bring Mouse Here</a>
</body>
</html>Ini akan menghasilkan tautan berikut. Sekarang Anda mengarahkan mouse ke tautan ini dan Anda akan melihat bahwa itu berubah warna menjadi kuning.
The: pseudo-class aktif
Contoh berikut menunjukkan cara menggunakan : kelas aktif untuk mengubah warna tautan aktif. Nilai yang memungkinkan dapat berupa nama warna apa pun dalam format apa pun yang valid.
<html>
<head>
<style type = "text/css">
a:active {color: #FF00CC}
</style>
</head>
<body>
<a href = "">Click This Link</a>
</body>
</html>Ini akan menghasilkan tautan berikut. Saat pengguna mengkliknya, warnanya berubah menjadi merah muda.
Kelas semu: fokus
Contoh berikut menunjukkan cara menggunakan kelas : fokus untuk mengubah warna tautan fokus. Nilai yang memungkinkan dapat berupa nama warna apa pun dalam format apa pun yang valid.
<html>
<head>
<style type = "text/css">
a:focus {color: #0000FF}
</style>
</head>
<body>
<a href = "">Click this Link</a>
</body>
</html>Ini akan menghasilkan tautan berikut. Saat tautan ini difokuskan, warnanya berubah menjadi oranye. Warnanya berubah kembali saat kehilangan fokus.
Pseudo-class: anak pertama
The : pertama-anak pseudo-class cocok dengan elemen tertentu yang merupakan anak pertama dari elemen lain dan menambah gaya khusus untuk elemen bahwa itu adalah anak pertama dari beberapa unsur lainnya.
Untuk membuat: pekerjaan anak pertama di IE <! DOCTYPE> harus dideklarasikan di bagian atas dokumen.
Misalnya, untuk mengindentasi paragraf pertama dari semua elemen <div>, Anda dapat menggunakan definisi ini -
<html>
<head>
<style type = "text/css">
div > p:first-child {
text-indent: 25px;
}
</style>
</head>
<body>
<div>
<p>First paragraph in div. This paragraph will be indented</p>
<p>Second paragraph in div. This paragraph will not be indented</p>
</div>
<p>But it will not match the paragraph in this HTML:</p>
<div>
<h3>Heading</h3>
<p>The first paragraph inside the div. This paragraph will not be effected.</p>
</div>
</body>
</html>Ini akan menghasilkan hasil sebagai berikut -
Pseudo-class: lang
Bahasa pseudo-class : lang , memungkinkan pembangunan selektor berdasarkan pengaturan bahasa untuk tag tertentu.
Kelas ini berguna dalam dokumen yang harus menarik banyak bahasa yang memiliki konvensi berbeda untuk konstruksi bahasa tertentu. Misalnya, bahasa Prancis biasanya menggunakan tanda kurung siku (<dan>) untuk tujuan kutipan, sedangkan bahasa Inggris menggunakan tanda kutip ('dan').
Dalam dokumen yang perlu mengatasi perbedaan ini, Anda dapat menggunakan: lang pseudo-class untuk mengubah tanda kutip dengan tepat. Kode berikut mengubah tag <blockquote> dengan tepat untuk bahasa yang digunakan -
<html>
<head>
<style type = "text/css">
/* Two levels of quotes for two languages*/
:lang(en) { quotes: '"' '"' "'" "'"; }
:lang(fr) { quotes: "<<" ">>" "<" ">"; }
</style>
</head>
<body>
<p>...<q lang = "fr">A quote in a paragraph</q>...</p>
</body>
</html>Para pemilih: lang akan berlaku untuk semua elemen dalam dokumen. Namun, tidak semua elemen menggunakan properti quotes, jadi efeknya akan transparan untuk sebagian besar elemen.
Ini akan menghasilkan hasil sebagai berikut -