Belajar CSS – Mengenal Pseudo-classes
CSS – Halo semuanya kembali lagi bersama saya. Pada artikel kali ini, saya akan membahas sedikit tentang pseudo class pada CSS yang dimana perlu kalian ketahui. Untuk itu, simak artikel berikut ini yaa.
A. Pembukaan
Dalam CSS kita sudah banyak menjumpai beberapa cara memberikan style agar tampilan website kalian menjadi indah mulai dari font, teks, background, selector kita sudah pelajari dan pada kali ini kita akan belajar mengenai pengertian dari pseudo class dan jenis nya. Berikut penjelasannya saya jabarkan dibawah ini.
1. Apa itu Pseudo Class?
Buat kalian yang penasaran, pseudo class itu adalah kelas rekayasa yang dapat digunakan untuk menentukan keadaan khusus pada elemen seperti contoh kalian pernah melihat sebuah website ketika kalian klik atau arahkan pointer pada menu-menu tertentu maka ia akan berubah style.
Misal seperti ini saya mengunjungi sebuah website, lalu saya arahkan pointer saya ke menu disana, anggap menu pada website itu biru namun ketika saya arahkan pointer saya pada menu tersebut, maka menu pada website tersebut berubah menjadi hijau.
Nah itu sedikit contoh yang dapat saya berikan agar kalian lebih paham mengenai pseudo class ini. Sebenernya pseudo class tidak hanya digunakan untuk itu saya, namun masih banyak kegunaan lain yang kalian bisa coba.
selector:pseudo-class{
property: value;
{
Diatas adalah sintaks untuk pseudo class, saya jelaskan sedikit ya:
Untuk selector kalian pasti sudah tahu, untuk pseudo class dapat diisi berdasarkan jenis nya yang saya akan jabarkan pada point kedua, selanjutnya masukkan property dan valuenya. Cukup simple kan?
2. Jenis – Jenis Pseudo Class
Lumayan banyak jenis yang bisa kalian gunakan agar website kalian lebih bagus lagi untuk dilihat. Berikut saya jabarkan dibawah.
a. Link
Yang pertama adalah link. Link adalah sebuah pseudo class yang bisa kalian gunakan untuk mengubah warna link sesuai dengan keinginan kita. Kita tahu bahwa tampilan default link itu berwarna biru maka untuk mengubahnya dengan menggunakan pseudo class link ini seperti contoh dibawah ini
Pada contoh diatas, saya membuat link dengan menggunakan class a, lalu saya ingin mengubah warna link tersebut menjadi kuning. Maka hasilnya akan seperti dibawah ini
Perlu diingat bahwa pseudo class link ini hanya bisa digunakan untuk tag link saja, tidak bisa digunakan untuk tag yang lainnya karena ditujukan hanya untuk mengubah warna pada link.
b. Hover
Yang kedua ialah hover. Hover merupakan sebuah pseudo class yang kalian bisa gunakan untuk mengubah tampilan ketika pointer menyentuh pada tag yang kalian berikan hover. Seperti pada ilustrasi saya diatas, itu merupakan kegunaan dari hover. Hover biasa digunakan pada bagian menu misalnya home, about, privacy dll. Dalam menggunakannya seperti contoh dibawah ini.
Pada contoh diatas, saya membuat class a yang saya isi dengan pseudo class hover dan didalamnya saya isi color kuning dan huruf miring yang berarti bahwa ketika mouse menyentuh kata “selamat datang” maka akan berubah warna kuning dan hurufnya miring.
Maka hasilnya seperti dibawah ini
Sebelum
Sesudah
c. Active
Yang ketiga adalah active. Active merupakan sebuah pseudo class yang bisa kalian gunakan untuk menandakan teks dan link tersebut active. Biasanya ketika teks atau link di klik maka style yang kalian buat akan muncul khususnya cocok untuk menandakan sebuah link active. Saya akan membuat contoh seperti gambar dibawah ini
Saya jelaskan sedikit maksud dari script diatas. Saya mempunyai link yang saya beri class ‘a’, lalu saya buat selector class a dan saya ketikkan pseudo classnya yaitu active. Setelah itu, saya masukkan property dan valuenya, maka hasilnya seperti dibawah ini
Sebelum
Sesudah
d. Visited
Yang keempat yaitu visited. Visited merupakan sebuah pseudo class dimana kalian bisa gunakan untuk menandakan link yang sudah dikunjungi.
Misal kalian membuat sebuah link yang default nya berwarna biru dan kalian ingin menandakan link tersebut berwarna merah jika kalian sudah mengunjungi atau mengklik nya, ini adalah kegunaan dari pseudo class visited. Saya beri contohnya dibawah ini
Maka hasilnya seperti ini
e. First – child
Yang kelima yaitu first-child. First-child adalah sebuah pseudo class yang bisa kalian gunakan untuk menandai atau memberi style. Misalnya kalian mempunyai 5 link yang secara default berwarna biru, lalu kalian ingin menandai link baris pertama dengan warna hijau. Inilah kegunaan dari first-child, pseudo class ini akan aktif apabila terdapat elemen yang membungkusnya. Saya akan beri contoh dibawah ini
Kita tahu bahwa <ul> mempunyai anak yaitu <li> berarti <ul> mempunyai anak sebanyak 10 dan <li> mempunyai anak 1 yaitu h3. Berarti yang akan kita beri style yaitu h3, karena h3 merupakan child dari li sedangkan li merupakan pembungkusnya.
Lalu saya ketikkan seperti gambar diatas dengan artian bahwa CSS carikan saya h3 didalam pembungkusnya yaitu li yang merupakan anak pertama. Maka hasilnya akan seperti ini
Selain first-child, terdapat pula yang lainnya yaitu last-child yang digunakan untuk menandai anak terakhir, dan nth-child untuk menandai anak ke- n, kalian bisa juga menggunakan angka ganjil atau genap pada nth-child.
Selain itu, terdapat pula pseudo class untuk paragraf atau teks biasanya digunakan untuk memberi style pada beberapa paragraf.
Misalnya saya ingin membuat dua paragraf dan saya ingin mewarnai paragraf pertama berwarna kuning sementara paragraf lainnya tidak berwarna, bagaimana? Yaitu dengan menggunakan pseudo class first-of-type dan last-of-type.
Penggunaanya sama seperti first-child hanya saja ini tidak perlu pembungkus dalam menggunakan pseudo class ini. Seperti contoh pada gambar di bawah ini
Demikian penjelasan saya mengenai pengertian Pseudo Class pada CSS, semoga artikel ini bermanfaat dan terus berlatih. Jika ada yang belum paham silahkan komen dibawah, nantikan artikel saya selanjutnya. Sekian dan Terima Kasih.
Belajar CSS – Mengenal Pseudo-classes
CSS – Halo semuanya kembali lagi bersama saya. Pada artikel kali ini, saya akan membahas sedikit tentang pseudo class pada CSS yang dimana perlu kalian ketahui. Untuk itu, simak artikel berikut ini yaa.
A. Pembukaan
Dalam CSS kita sudah banyak menjumpai beberapa cara memberikan style agar tampilan website kalian menjadi indah mulai dari font, teks, background, selector kita sudah pelajari dan pada kali ini kita akan belajar mengenai pengertian dari pseudo class dan jenis nya. Berikut penjelasannya saya jabarkan dibawah ini.
1. Apa itu Pseudo Class?
Buat kalian yang penasaran, pseudo class itu adalah kelas rekayasa yang dapat digunakan untuk menentukan keadaan khusus pada elemen seperti contoh kalian pernah melihat sebuah website ketika kalian klik atau arahkan pointer pada menu-menu tertentu maka ia akan berubah style.
Misal seperti ini saya mengunjungi sebuah website, lalu saya arahkan pointer saya ke menu disana, anggap menu pada website itu biru namun ketika saya arahkan pointer saya pada menu tersebut, maka menu pada website tersebut berubah menjadi hijau.
Nah itu sedikit contoh yang dapat saya berikan agar kalian lebih paham mengenai pseudo class ini. Sebenernya pseudo class tidak hanya digunakan untuk itu saya, namun masih banyak kegunaan lain yang kalian bisa coba.
selector:pseudo-class{
property: value;
{
Diatas adalah sintaks untuk pseudo class, saya jelaskan sedikit ya:
Untuk selector kalian pasti sudah tahu, untuk pseudo class dapat diisi berdasarkan jenis nya yang saya akan jabarkan pada point kedua, selanjutnya masukkan property dan valuenya. Cukup simple kan?
2. Jenis – Jenis Pseudo Class
Lumayan banyak jenis yang bisa kalian gunakan agar website kalian lebih bagus lagi untuk dilihat. Berikut saya jabarkan dibawah.
a. Link
Yang pertama adalah link. Link adalah sebuah pseudo class yang bisa kalian gunakan untuk mengubah warna link sesuai dengan keinginan kita. Kita tahu bahwa tampilan default link itu berwarna biru maka untuk mengubahnya dengan menggunakan pseudo class link ini seperti contoh dibawah ini
Pada contoh diatas, saya membuat link dengan menggunakan class a, lalu saya ingin mengubah warna link tersebut menjadi kuning. Maka hasilnya akan seperti dibawah ini
Perlu diingat bahwa pseudo class link ini hanya bisa digunakan untuk tag link saja, tidak bisa digunakan untuk tag yang lainnya karena ditujukan hanya untuk mengubah warna pada link.
b. Hover
Yang kedua ialah hover. Hover merupakan sebuah pseudo class yang kalian bisa gunakan untuk mengubah tampilan ketika pointer menyentuh pada tag yang kalian berikan hover. Seperti pada ilustrasi saya diatas, itu merupakan kegunaan dari hover. Hover biasa digunakan pada bagian menu misalnya home, about, privacy dll. Dalam menggunakannya seperti contoh dibawah ini.
Pada contoh diatas, saya membuat class a yang saya isi dengan pseudo class hover dan didalamnya saya isi color kuning dan huruf miring yang berarti bahwa ketika mouse menyentuh kata “selamat datang” maka akan berubah warna kuning dan hurufnya miring.
Maka hasilnya seperti dibawah ini
Sebelum
Sesudah
c. Active
Yang ketiga adalah active. Active merupakan sebuah pseudo class yang bisa kalian gunakan untuk menandakan teks dan link tersebut active. Biasanya ketika teks atau link di klik maka style yang kalian buat akan muncul khususnya cocok untuk menandakan sebuah link active. Saya akan membuat contoh seperti gambar dibawah ini
Saya jelaskan sedikit maksud dari script diatas. Saya mempunyai link yang saya beri class ‘a’, lalu saya buat selector class a dan saya ketikkan pseudo classnya yaitu active. Setelah itu, saya masukkan property dan valuenya, maka hasilnya seperti dibawah ini
Sebelum
Sesudah
d. Visited
Yang keempat yaitu visited. Visited merupakan sebuah pseudo class dimana kalian bisa gunakan untuk menandakan link yang sudah dikunjungi.
Misal kalian membuat sebuah link yang default nya berwarna biru dan kalian ingin menandakan link tersebut berwarna merah jika kalian sudah mengunjungi atau mengklik nya, ini adalah kegunaan dari pseudo class visited. Saya beri contohnya dibawah ini
Maka hasilnya seperti ini
e. First – child
Yang kelima yaitu first-child. First-child adalah sebuah pseudo class yang bisa kalian gunakan untuk menandai atau memberi style. Misalnya kalian mempunyai 5 link yang secara default berwarna biru, lalu kalian ingin menandai link baris pertama dengan warna hijau. Inilah kegunaan dari first-child, pseudo class ini akan aktif apabila terdapat elemen yang membungkusnya. Saya akan beri contoh dibawah ini
Kita tahu bahwa <ul> mempunyai anak yaitu <li> berarti <ul> mempunyai anak sebanyak 10 dan <li> mempunyai anak 1 yaitu h3. Berarti yang akan kita beri style yaitu h3, karena h3 merupakan child dari li sedangkan li merupakan pembungkusnya.
Lalu saya ketikkan seperti gambar diatas dengan artian bahwa CSS carikan saya h3 didalam pembungkusnya yaitu li yang merupakan anak pertama. Maka hasilnya akan seperti ini
Selain first-child, terdapat pula yang lainnya yaitu last-child yang digunakan untuk menandai anak terakhir, dan nth-child untuk menandai anak ke- n, kalian bisa juga menggunakan angka ganjil atau genap pada nth-child.
Selain itu, terdapat pula pseudo class untuk paragraf atau teks biasanya digunakan untuk memberi style pada beberapa paragraf.
Misalnya saya ingin membuat dua paragraf dan saya ingin mewarnai paragraf pertama berwarna kuning sementara paragraf lainnya tidak berwarna, bagaimana? Yaitu dengan menggunakan pseudo class first-of-type dan last-of-type.
Penggunaanya sama seperti first-child hanya saja ini tidak perlu pembungkus dalam menggunakan pseudo class ini. Seperti contoh pada gambar di bawah ini
Demikian penjelasan saya mengenai pengertian Pseudo Class pada CSS, semoga artikel ini bermanfaat dan terus berlatih. Jika ada yang belum paham silahkan komen dibawah, nantikan artikel saya selanjutnya. Sekian dan Terima Kasih.