Jum'at, 22 Oktober 2021

Pseudo Class dan Pseudo Element Pada CSS

Pada tutorial sebelumnya saya sudah membahas tentang jenis-jenis selector pada CSS, pada kesempatan kali ini saya akan membahas tentang 2 jenis selector khusus di dalam CSS, yaitu Pseudo Class dan Pseudo Element.


Pseudo Class dan Pseudo Element memang terkesan rumit, tapi tidak serumit yang Anda bayangkan, karena keduanya cukup mudah untuk dipahami. Pseudo Class dan Pseudo Element disebut juga sebagai pseudo selector. Kenapa disebut pseudo selector (selector ‘semu’)? Karena tidak seperti selector lain, pseudo selector digunakan untuk mengakses kode HTML yang ‘tidak terlihat’ atau merupakan bagian dari sebuah tag yang tidak bisa diakses dengan selector biasa.

Pengertian Pseudo-element Selector CSS

Pseudo Element merupakan sebuah selector yang berfungsi untuk menyeleksi elemen atau tag secara otomatis, tapi bisa juga di artikan sebagai selector yang menciptakan elemen atau tag palsu tanpa menuliskan kode HTML.

Pada versi CSS1 dan CSS2 Pseudo Element ditulis dengan menggunakan 1 tanda titik dua “:” sama seperti dengan Pseudo Class,  tetapi pada versi CSS3 Pseudo Element ini ditulis dengan menggunakan 2 tanda titik dua “::”. Perubahan ini dibuat supaya bisa lebih mempermudah membedakan antara Pseudo Class dan Pseudo Element. Penggunaan 1 tanda titik dua masih bisa dibilang umum, karena semua browser pada umumnya masih mendukung penggunaan 1 tanda titik dua. Bahkan browser modern masih mendukung penulisan menggunakan 1 tanda titik dua “:”.

Sebagai contoh, Pseudo Element ::first-letter, dimana selector ::first-letter ini berfungsi untuk menyeleksi huruf pertama dari sebuah paragraf, atau secara sederhanya untuk membuat efek dropcap. Misalkan kita ingin membuat huruf pertama pada sebuah paragraf menjadi berwarna merah dan memberikan efek dropcap, maka kode CSSnya itu sebagai berikut.
Pseudo Class dan Pseudo Element Pada CSS
Selain ::first-letter, Pseudo Element masih memiliki beberapa selector lain seperti ::first-line, ::before, dan ::after.


Pengertian Pseudo-class Selector CSS

Pseudo Class Selector adalah selector CSS yang digunakan untuk mengakses bagian tertentu dalam HTML yang tidak ‘terlihat’ (tidak tertulis di dalam HTML) atau bagian dari HTML yang tidak bisa diakses dengan selector sederhana lain.

Berikut ini adalah format standar untuk penulisan Pseudo class di dalam CSS:
Pseudo Class dan Pseudo Element Pada CSS
Berikut ini adalah beberapa pseudo class standar yang umum atau sering digunakan pada sebuah halaman web:

  • link = Berfungsi untuk menambahkan style pada link yang belum pernah di kunjungi atau klik.
  • hover = Berfungsi untuk menambahkan style pada elemen pada saat mouse berada di atasnya.
  • active = Berfungsi untuk menambahkan style pada elemen yang sedang aktif.
  • visited = Berfungsi untuk menambahkan style pada link yang sudah pernah di kunjungi.

Pseudo-class selector masih memiliki beberapa selector lain, seperti :focus , :nth-child(N), :last-child, only-child dan :not(S).

Sebagai contoh, saya akan membuat sebuat link. Seperti yang sudah kita pelajari bahwa tag <a> digunakan untuk membuat link di dalam HTML.
Pseudo Class dan Pseudo Element Pada CSS
Dari contoh tag <a> diatas, kita bisa melihat bahwa tag <a> memiliki sebuah class “contohlink”. Misalkan kita ingin link tersebut berwarna biru, maka sintax css-nya seperti berikut:
Pseudo Class dan Pseudo Element Pada CSS
Sekarang link tersebut sudah berwarna biru, terus contoh penerapan Pseudo Class Selector seperti apa? Link yang tadi kita buat berwarna biru, terus bagaimana caranya ketika link tersebut disentuh warnanya berubah menjadi warna merah? Nah disini fungsinya Pseudo Class Selector. Untuk membuat link tersebut menjadi warna merah ketika disentuh, maka sintax css-nya seperti berikut:
Pseudo Class dan Pseudo Element Pada CSS
Perhatikan sintax css diatas, saya menggunakan pseudo class (:hover) untuk membuat link tersebut menjadi warna merah ketika disentuh.

Demikianlah tutorial tentang Pseudo Class dan Pseudo Element Pada CSS. Silahkan bagikan atau share artikel ini jika ada yang membutuhkan. Semoga bermanfaat!

  • Share Post:
related posts
about author

Seseorang yang suka belajar sesuatu yang baru, terutama tentang pemrograman web. Senang berbagi tentang pengetahuan dan belajar dari yang lain.

recent posts
categories
trending posts
SERBA KOMPUTER © 2017 - 2019, ALL RIGHTS RESERVED.