Mengenal Psudo Element dan Psudo Class pada CSS

Pada kesempatan kali ini kita akan membahas sesuatu yang menarik dan wajib dipelajari mengenai CSS yaitu Psudo Element dan Psudo Class CSS, Apasih Psudo Elemnt dan Psudo Class itu ? baiklah, langsung saja , mari kita bahas.

1.Pseudo Class

Pseudo Class 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.

Contoh penulisan Psudo Class di dalam CSS adalah sebagai berikut:

div:hover{

background-color: lightcoral;

}

Pada contoh di atas, saya menggunakan psudo class :hover, dimana psudo class ini berfungsi untuk mengubah style element pada saat mouse berada diatas elemnt tersebut.

Berikut ini adalah beberapa pseudo class yang sering digunakan pada sebuah halaman web:

1. :link = Berfungsi untuk menambahkan style pada link yang belum pernah di kunjungi atau klik.
2. :hover = Berfungsi untuk menambahkan style pada elemen pada saat mouse berada di atasnya.
3. :active = Berfungsi untuk menambahkan style pada elemen yang sedang aktif.
4. :visited = Berfungsi untuk menambahkan style pada link yang sudah pernah di kunjungi.
5. :first-child = memilih element pertama dari beberapa element yang sama.
6. :last-child =Memilih elemen terakhir dari beberapa elemnt yang sama.
7. :nth-child() - Memilih elemen berdasarkan ekspresi aljabar sederhana (contoh "2n", atau "4n-h1").

2.Pseudo Element

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 sebelumnya Pseudo Element ditulis dengan menggunakan 1 tanda titik dua “:”, tetapi pada versi CSS3 Pseudo Element ini ditulis dengan menggunakan 2 tanda titik dua “::”. Perubahan ini dibuat untuk lebih mempermudah membedakan antara Pseudo Class dan Pseudo Element.

Contoh penulisan Psudo Element di dalam CSS adalah sebagai berikut:

p::first-letter{

font-size: 50px;

}

Pada contoh diatas, saya menggunakan psudo element ::firts-letter, dimana element ini berfungsi untuk melakukan perubahan style pada huruf pertama dari sebuah paragraf.

Ada banyak psudo element dalam CSS, berikut ini saya akan membahas mengenai psudo element yang sering digunakan agar tampilan website lebih menarik.

1.::before & ::after

Sebuah psudo elemnt yang memungkinkan kita untuk menambahkan konten baru (sebelum/ sesudah element) pada halaman HTML hanya melalui CSS saja, element ini tidak benar-benar ada dalam struktur html, namun tetap akan digenerate oleh browser sehingga akan tetap tampak, namun ketika kita lihat source nya (view source), kita tidak akan menemukannya, penggunaan element ini benar-benar sama seperti element real lainnya.

2.::first-letter

Memilih huruf pertama dalam elemen. Biasa dipakai untuk dropcap (Huruf pertama yang membesar).

3.::first-line

Memilih baris pertama dari sebuah teks di dalam elemen.