Pada pembahasan kali ini, kita akan menjelasakan tentang pseudo-class pada CSS. Apa itu pseudo-class dan bagaimana penerapannya pada CSS? Simaklah penjelasan berikut ini.
Section Artikel
- 1 Apa itu Pseudo-class?
- 2 Syntax
- 3 Anchor Pseudo-class
- 4 Pseudo-classes dan Class CSS
- 5 Hover pada elemen <div>
- 6 Tooltip Hover
- 7 Pseudo-class :first-child pada CSS
- 8 Mencocokkan elemen <p> pertama
- 9 Cocokkan elemen <i> pertama pada semua elemen <p>
- 10 Mencocokan semua elemen <i> dengan seluruh ketururnan pertama elemen <p>
- 11 Pseudo-class:lang pada CSS
- 12 Seluruh Pseudo Class pada CSS
- 13 Seluruh Elemen Pseudo CSS
Apa itu Pseudo-class?
Pseudo-class di CSS digunakan untuk mendefinisikan keadaan khusus dari suatu elemen.
Misalnya, pseudo-class dapat digunakan untuk:
- Memberikan style sebuah elemen saat pengguna mengarahkan mouse ke atas elemen.
- Memberikan style berbeda pada link yang telah dikunjungi dan belum dikunjungi.
- Memberikan style pada sebuah elemen saat elemen memiliki elemen focus
Syntax
Sintaks dari pseudo-class dapat didefinisiskan seperti dibawah ini:
selector:pseudo-class {
property: value;
}Anchor Pseudo-class
Sebuah link dapat ditampilkan dengan berbagai cara yang berbeda. Agar lebih mudah dipahami, lihatlah pada contoh dibawah ini.
Contoh :
<!DOCTYPE html> <html> <head> <style> /* unvisited link */ a:link { color: red; } /* visited link */ a:visited { color: green; } /* mouse over link */ a:hover { color: hotpink; } /* selected link */ a:active { color: blue; } </style> </head> <body> <p><b><a href="default.asp" target="_blank">Ini sebuah link</a></b></p> <p><b>catatan:</b> a: hover HARUS muncul setelah a: link dan a: visited dalam definisi CSS agar efektif.</p> <p><b>Catatan:</b> a: active HARUS muncul setelah a: hover dalam definisi CSS agar efektif.</p> </body> </html>
Catatan: a: hover HARUS muncul setelah a: link dan a: visited dalam definisi CSS agar efektif, lalu a: active HARUS muncul setelah a: hover dalam definisi CSS agar efektif. Penamaan pseudo-class tidak peka huruf besar kecil (tidak case sensitive).
Pseudo-classes dan Class CSS
Pseudo-class dapat digabungkan dengan class CSS. Untuk memahami bagaimana cara penggunaan keduanya, lihat pada contoh dibawah ini.
Pada contoh dibawah ini ketika kursor diarahkan pada link , maka link tersebut akan berubah warna:
Contoh ;
<!DOCTYPE html>
<html>
<head>
<style>
a.highlight:hover {
color: #ff0000;
}
</style>
</head>
<body>
<p><a class="highlight" href="css_syntax.asp">Sintak CSS</a></p>
<p><a href="default.asp">Tutorial CSS</a></p>
</body>
</html>
Hover pada elemen <div>
Contoh penggunaan pseudo-class: hover pada elemen <div>:
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: green;
color: white;
padding: 25px;
text-align: center;
}
div:hover {
background-color: blue;
}
</style>
</head>
<body>
<p>Arahkan mouse ke elemen div di bawah ini untuk mengubah warna background:</p>
<div>Arahkan mouse padaku</div>
</body>
</html>
Tooltip Hover
Arahkan kursor pada elemen <div> untuk menampilkan elemen <p> (seperti tooltip).
Contoh :
<!DOCTYPE html>
<html>
<head>
<style>
p {
display: none;
background-color: yellow;
padding: 20px;
}
div:hover p {
display: block;
}
</style>
</head>
<body>
<div>Arahkan kursor ke saya untuk menunjukkan elemen p
<p>Tada! Aku disini!</p>
</div>
</body>
</html>
Pseudo-class :first-child pada CSS
Pseudo-class: first-child bekerja dengan cara mencocokkan elemen tertentu yang merupakan turunan pertama dari elemen lain.
Mencocokkan elemen <p> pertama
Dalam contoh berikut, selector akan mencocokkan setiap elemen <p> yang merupakan turunan pertama dari setiap elemen :
Contoh :
<!DOCTYPE html>
<html>
<head>
<style>
p:first-child {
color: blue;
}
</style>
</head>
<body>
<p>Ini adalah teks.</p>
<p>Ini adalah teks</p>
<p><b>Catatan:</b> Agar first-child bekerja di IE8 dan sebelumnya, DOCTYPE harus dideklarasikan.</p>
</body>
</html>
Cocokkan elemen <i> pertama pada semua elemen <p>
Dalam contoh berikut, selector akan mencocokan elemen <i> pertama dengan semua elemen <p>:
<!DOCTYPE html>
<html>
<head>
<style>
p i:first-child {
color: blue;
}
</style>
</head>
<body>
<p>Aku<i> Orang</i> yang kuat. Aku <i>orang</i> yang kuat</p>
<p>Aku<i> orang</i> yang kuat. aku <i>orang</i> yang kuat</p>
<p><b>Catatan:</b> Agar first-child bekerja di IE8 dan sebelumnya, DOCTYPE harus dideklarasikan.</p>
</body>
</html>
Mencocokan semua elemen <i> dengan seluruh ketururnan pertama elemen <p>
Dalam contoh berikut, selector mencocokan semua elemen <i> dengan seluruh keturunan pertama elemen <p>.
Contoh :
<!DOCTYPE html>
<html>
<head>
<style>
p:first-child i {
color: blue;
}
</style>
</head>
<body>
<p>Aku<i> orang</i> yang Kuat. Aku <i>orang</i>yang kuat.</p>
<p>Aku<i> orang</i> yang kuat. aku <i>orang</i> yang kuat</p>
<p><b>Catatan:</b> Agar first-child bekerja di IE8 dan sebelumnya, DOCTYPE harus dideklarasikan.</p>
</body>
</html>
Pseudo-class:lang pada CSS
Pseudo-class: lang memungkinkan kita dalam menentukan aturan khusus pada berbagai bahasa.
Pada contoh di bawah ini pseudo-class: lang mendefinisikan tanda kutip untuk elemen <q> dengan lang = “no”
.
Contoh :
<!DOCTYPE html>
<html>
<head>
<style>
q:lang(no) {
quotes: "~" "~";
}
</style>
</head>
<body>
<p>Beberapa teks <q lang="no">Kutipan dalam paragraf</q> sejumlah teks.</p>
<p>Dalam contoh ini :lang mendefinisikan tanda kutip untuk elemen q dengan lang = "no":</p>
<p><b>Catatan:</b> IE8 mendukung pseudo-class:lang hanya jika DOCTYPE ditentukan.</p>
</body>
</html>
Seluruh Pseudo Class pada CSS
| Selector | Contoh | Deskripsi Contoh |
| :active | a:active | Memilih link aktif |
| :checked | input:checked | Memilih setiap elemen <input> yang dicentang |
| :disabled | input:disabled | Memilih setiap elemen <input> yang dinonaktifkan |
| :empty | p:empty | Memilih setiap elemen yang tidak memiliki turunan |
| :enabled | input:enabled | Memilih setiap elemen <p> yang diaktifkan |
| :first-child | p:first-child | Memilih setiap elemen <p> yang merupakan anak pertama dari induknya |
| :first-of-type | p:first-of-type | Memilih setiap elemen <p> yang merupakan elemen <p> pertama dari induknya |
| :focus | input:focus | Memilih elemen yang memiliki elemen focus |
| :hover | a:hover | Memilih link di atas mouse |
| :in-range | input:in-range | Memilih elemen <input> dengan nilai dalam rentang yang ditentukan |
| :invalid | input:invalid | Memilih semua elemen <input> dengan nilai yang tidak valid |
| :lang(language) | p:lang(it) | Memilih setiap elemen <p> dengan nilai atribut lang yang diawali dengan “it” |
| :last-child | p::last-child | Memilih setiap elemen <p> yang merupakan turunan terakhir dari induknya |
| :last-of-type | p:last-of-type | Memilih setiap elemen <p> yang merupakan elemen <p> terakhir dari induknya |
| :link | a:link | Memilih semua link yang belum dikunjungi |
| :not(selector) | :not(p) | Memilih setiap elemen yang bukan merupakan elemen <p> |
| :nth-child(n) | p:nth-child(2) | Memilih setiap elemen <p> yang merupakan anak kedua dari induknya |
| :nth-last-child(n) | p:nth-last-child(2) | Memilih setiap elemen <p> yang merupakan anak kedua dari induknya, dihitung dari anak terakhir |
| :nth-last-of-type(n) | p:nth-last-of-type(2) | Memilih setiap elemen <p> yang merupakan elemen <p> kedua dari induknya, dihitung dari turunan terakhir |
| :nth-of-type(n) | p:nth-of-type(2) | Memilih setiap elemen <p> yang merupakan elemen <p> kedua dari induknya |
| :only-of-type | p:only-of-type | Memilih setiap <p> elemen yang merupakan satu-satunya elemen <p> dari induknya |
| :only-child | p:only-child | Memilih setiap elemen <p> yang merupakan anak tunggal dari induknya |
| :optional | input:optional | Memilih elemen <input> tanpa atribut “optional” |
| :out-of-range | input:out-of-range | Memilih elemen <input> dengan nilai di luar rentang yang ditentukan |
| :read-only | input:read-only | Memilih elemen <input> dengan atribut “readonly” yang ditentukan |
| :read-write | input:read-write | Memilih elemen <input> tanpa atribut “readonly” |
| :required | input:required | Memilih elemen <input> dengan atribut “required” yang ditentukan |
| :root | root | Memilih elemen root dokumen |
| :target | #news:target | Memilih elemen active #news saat ini (diklik pada URL yang berisi nama anchor itu) |
| :valid | input:valid | Memilih semua elemen <input>dengan nilai yang valid |
| :visited | a:visited | Memilih semua link yang telah dikunjungi |
Seluruh Elemen Pseudo CSS
| Selector | Contoh | Contoh Deskripsi |
| ::after | p::after | Menyisipkan konten setelah semua elemen <p> |
| ::before | p::before | Menyisipkan konten sebelum semua elemen <p> |
| ::first-letter | p::first-letter | Memilih huruf pertama dari setiap elemen <p> |
| ::first-line | p::first-line | Memilih baris pertama dari setiap elemen <p> |
| ::selection | p::selection | Memilih bagian elemen yang dipilih oleh pengguna |
Sekian pembahasan tentang pseudo-class pada CSS, semoga bermanfaat.
