CSS Dasar Part 9 - Pseudo-Class Pada CSS
CSS Dasar Part 9 - Pseudo-Class Pada CSS - Pembahasan pada artikel ini, saya akan membahas mengenai suatu class yang ada pada CSS, yaitu CSS Pseudo-Class. Definisi CSS Pseudo-Class berdasarkan link http://www.W3schools.Com/css/css_pseudo_classes.Asp adalah sebagai berikut :
CSS Pseudo-Class merupakan kelas semu yang dimiliki sang sebuah elemen HTML, yang menciptakan kita bisa mendefinisikan style dalam ?Keadaan eksklusif? Berdasarkan elemen tadi.
 |
| Pseudo Class |
Dari definisi di atas Pseudo-Class diklaim menggunakan kelas semu, lantaran elemen HTMLnya sebenarnya memilki group, namun hanya akan aktif pada keadaan eksklusif saja. Maksudnya misalnya apa?. Pseudo-class memiliki beberapa jenis tipe sebagai berikut :
1. Pseudo-Class yg berhubungan dengan link
:link
Style default pada sebuah link yang direpresentasikan dengan tag <a> yang memiliki href. Untuk penjelasan mengenai link ini silakan kunjungi artikel saya yang berjudul Tag Hyperlink Pada HTML. Apabila link ini tidak diberi style, secara default warna dari link ini adalah warna blue/biru. Link dalam kondisi jenis pseudo-class ini secara default belum pernah aktif atau dikunjungi sebelumnya. Atau kondisi link pada saat pertama kali membuka browser. Untuk contoh kondisi ini, kita bisa mengolah halaman HTML berikut, agar lebih jelas dalam menggunakan pseudo-class ini:
HTML :
<!DOCTYPE html> <html> <head> <title>Pseudo-Class</title> <link rel="stylesheet" href="style.css"> </head> <body> <h1>Hello World</h1> <h3><a href="#" class="belajar">Belajar Pseudo Class</a></h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut voluptatum odit provident delectus ipsa perspiciatis ea quo excepturi praesentium vitae, sit nihil saepe totam ipsam similique laborum unde quam recusandae!</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto id asperiores rerum expedita dolores aliquid, sequi ducimus eligendi recusandae, deserunt tenetur. Dolor aliquam, amet. Quo sint, laudantium numquam ratione laborum.</p> <ul> <li><a href="#">link 1</a></li> <li><a href="#">link 2</a></li> <li><a href="#">link 3</a></li> <li><a href="#">link 4</a></li> <li><a href="#">link 5</a></li> <li><a href="#">link 6</a></li> <li><a href="#">link 7</a></li> <li><a href="#">link 8</a></li> <li><a href="#">link 9</a></li> <li><a href="#">link 10</a></li> </ul> </body> </html>
 |
| HTML buat Bahan Penjelasan |
.Belajar:link color: magenta;
 |
| Link |
:hover
Style ketika kursor mouse berada pada atas sebuah link / elemen HTML lainnya. Style buat link dalam syarat ini hanya akan aktif, bila kursor mouse berada persis pada atas link yg bersangkutan. Walaupun blm pernah aktif atau dikunjungi sekalipun. Silakan lihat contoh dibawah ini :
CSS
.Belajar:hover font-size: 20px; color: aqua;
 |
| :hover |
:active
Style ketika sebuah link pada-klik. Pada syarat ini, link sebagai aktif. Secara default, apalabila kondisi aktif ini nir diberi style, maka warna text pada saat diklik/kondisi aktif berwarna merah. Silakan lihat model penggunaannya sebagai berikut :
 |
| :active |
.Belajar:active font-style: italic;
 |
| :active |
:visited
Style waktu sebuah link yang pernah dikunjungi sebelumnya dan dengan menggunakan browser yang sama. Style link buat syarat visited ini, jika nir diberi style, maka secara default warnanya purple/ungu.
.Belajar:visited color: green;
 |
| :visited |
2. Pseudo-Class yang berhubungan dengan posisi/urutan elemen. Pseudo-class ini baru ada di CSS3 dan memiliki beberapa jenis, diantaranya sebagai berikut :
dua.A Pseudo-Class yang herbi posisi elemen ( konsep parent-child )
<ul> <li><a href="#">link 1</a></li> <li><a href="#">link 2</a></li> <li><a href="#">link 3</a></li> <li><a href="#">link 4</a></li> <li><a href="#">link 5</a></li> <li><a href="#">link 6</a></li> <li><a href="#">link 7</a></li> <li><a href="#">link 8</a></li> <li><a href="#">link 9</a></li> <li><a href="#">link 10</a></li> </ul>
Pseudo-class ini dominan menggunakan konsep parent-child. Class ini akan aktif tergantung dari jenis metode yang dipakai pada selector pada saat pemilihan elemen child yang ada pada elemen yang menjadi parentnya. Seperti contoh HTML di atas, elemen <ul> adalah elemen parent dari elemen <li>, berarti elemen <ul> memilki 10 child yang direpresentasikan dengan tag<li>, dan masing-masing elemen <li> memiliki jumlah 1 anak yang direpresentasikan dengan tag<a>.
Untuk penerapan jenis pseudo-class ini terdapat beberapa macam, antara lain sebagai berikut :
:first-child
Pseudo-class ini berfungsi untuk memilih elemen pertama dari sebuah parent ( elemen pembungkusnya ) tanpa mempedulikan berapa elemen child yang dimiliki sang elemen parent-nya. Contohnya silakan lihat dibawah ini :
li:first-child a color: orange; /*cara bacanya : css carikan elemen a yg ada pada li & anak pertama dari li*/
 |
| :first-child |
:last-child
Pseudo-class ini berfungsi buat memilih element terakhir dari sebuah parent ( elemen pembungkusnya ) tanpa mempedulikan berapa elemen child yg dimiliki oleh elemen parent-nya. Contohnya silakan lihat dibawah ini :
li:last-child a color: orange; /*cara bacanya : css carikan elemen a yang terdapat pada li dan anak terakhir dari li*/
 |
| :last-child |
:nth-child(n)
Pseudo-class ini berfungsi buat menentukan elemen ke-n atau khusus menurut sebuah parent ( elemen pembungkusnya ),
Jika kita menggunaka :nth-child(n), maka kita harus menggunakan parameter (n) . Parameter yang bisa dipakai buat menentukan nilai (n) sanggup beberapa jenis, antara lain :
1. Urutan elemen pribadi berdasarkan elemen child-nya. Model = 1, dua, tiga, 4, lima,......Dst.
Li:nth-child(tiga) a color: orange; /*cara bacanya : css carikan elemen a yang terdapat dalam li & anak ke-tiga menurut li*/
 |
| :nth-child |
dua. Kelipatan menurut elemen child-nya. Contoh = 2n, 3n, 4n, 5n,.....Dst.
Li:nth-child(2n) a color: orange; /*cara bacanya : css carikan elemen a yg terdapat dalam li dan adalah anak yg urutannya berupa kelipatan dua menurut li*/
 |
| :nth-child |
3. Kelipatan yg berpola dari elemen child-nya model = (3n-2), (3n 1), (4n-1), ....Dst.
Li:nth-child(3n-dua) a color: orange; /*cara bacanya : css carikan elemen a yang terdapat pada li dan adalah child yg urutannya berupa kelipatan 3, tetapi urutannya dimulai menurut urutan child no 1 berdasarkan li*/
 |
| :nth-child |
4. Urutan genap berdasarkan elemen child-nya. Contoh = (even).
Li:nth-child(even) a color: orange; /*cara bacanya : css carikan elemen a yang terdapat dalam li & adalah child yg urutannya genap dari li*/
 |
| :nth-child |
5. Urutan ganjil dari elemen childnya. Contoh = (odd).
Li:nth-child(odd) a color: orange; /*cara bacanya : css carikan elemen a yg ada pada li & adalah child yang urutannya gasal dari li*/
 |
| :nth-child |
dua.B Pseudo-Class yang herbi posisi elemen
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut voluptatum odit provident delectus ipsa perspiciatis ea quo excepturi praesentium vitae, sit nihil saepe totam ipsam similique laborum unde quam recusandae!</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam ratione tempora illum consectetur ducimus excepturi, explicabo, placeat laboriosam labore quibusdam distinctio consequuntur. Rerum expedita, placeat assumenda enim hic nihil porro.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto id asperiores rerum expedita dolores aliquid, sequi ducimus eligendi recusandae, deserunt tenetur. Dolor aliquam, amet. Quo sint, laudantium numquam ratione laborum.</p>
Kadang kita menjumpai sebuah elemen yg tidak punya elemen pembungkusnya (parent-nya), tetapi kita ingin memberikan style yang tidak sinkron untuk elemen baik yang pertama ditemui atau yg terakhir ditemui. Pseudo-group juga memilki beberapa jenis metode yg bisa diterapkan dalam pemilihan selectornya, diantaranya menjadi berikut :
:first-of-type
Memilih elemen pertama menurut sebuah jenis / tipe tag
p:first-of-type color: aqua;
:last-of-type
Memilih elemen terakhir menurut sebuah jenis / tipe tag
p:last-of-type color: red;
 |
| :first-of-type dan :last-of-type |
Pembahasan tentang konsep pseudo-class yg ada dalam CSS & bagaimana cara penggunaanya, sekian dulu. Semoga sahabat-teman sanggup mengerti penerangan ini, terutama bagi para pemula yang baru belajar CSS. Jika ada pertanyaan, kritik dan saran. Silakan ajukan dalam kolom komentar dibawah ini. Semoga artikel ini mampu berguna buat teman-sahabat seluruh, terutama bagi para pemula. Tetap semangat nge-blog. See you on my next articles. Bye-bye....
Referensi:
https://developer.Mozilla.Org/en-US/docs/Web/CSS/Reference
http://www.W3schools.Com/css/css_pseudo_classes.Asp
- kalau ada pertanyaan, silakan tulis saja dikotak komentar dibawah, asal bukan spam dan sesuai dengan topik pembahasan.
- the language in this article uses indonesian, if you didn't understand with my language, you can use google translate or any others translator.
Belum ada Komentar untuk "CSS Dasar Part 9 - Pseudo-Class Pada CSS"
Posting Komentar