Pseudo class dan Pseudo Elements CSS

Pada tutorial CSS dan HTML kali ini kita akan membahas seputar pseudo-classes dan pseudo-elements.

Apa itu pseudo?

pseudo adalah selector / pemilih yang memilih elemen yang berada dalam kondisi tertentu, misalkan elemen pertama yang diarahkan oleh mouse. yang bertindak seolah-olah kita telah menerapkan kelas ke beberapa bagian dokumen.

pseudo adalah kata kunci yang dimulai dengan titik dua. Misalnya, :hover ini termasuk dari pseudo. Contoh pseudo sederhana Jika kita ingin membuat paragraf pertama dalam artikel lebih besar dan tebal, kita dapat menambahkan kelas ke paragraf tersebut, lalu menambahkan CSS ke class tersebut, seperti pada contoh di bawah:

CSS ⇊

article p:first-child {
    font-size: 120%;
    font-weight: bold;
}

HTML ⇊

<article>

<p>
Ini merupakan selector pseudo di bagian paragraph pertama dengan font huruf yang tebal 120%
</p>

<p>
dan ini parargraph kedua dengan ukuran font standar atau normal yang digunakan pada paragrap. tulisan ini sebagai contoh dari penggunaan pseudo p:first-child pada awal paragrap
</p>

</article>

Maka hasil akhir seperti berikut ⇊

Ini merupakan selector pseudo di bagian paragraph pertama dengan font huruf yang tebal 120%

dan ini parargraph kedua dengan ukuran font standar atau normal yang digunakan pada paragrap. tulisan ini sebagai contoh dari penggunaan pseudo p:first-child pada awal paragrap

Semua class pseudo bertindak dengan cara yang sama. Mereka menargetkan beberapa bagian dari dokumen yang berada dalam keadaan tertentu, seolah-olah telah menambahkan kelas ke dalam HTML.Beberapa Pseudo class hanya berlaku saat pengguna berinteraksi dengan dokumen dengan cara tertentu. Pseudo class tindakan pengguna ini, terkadang disebut sebagai dynamic pseudo class,yang seolah-olah sebuah kelas telah ditambahkan ke dalam elemen saat pengguna berinteraksi dengannya. Contohnya termasuk:

:hover — ini hanya berlaku jika pengguna memindahkan penunjuknya ke suatu elemen, biasanya tautan atau link.
:focus — hanya berlaku jika pengguna memfokuskan elemen dengan mengklik atau menggunakan kontrol keyboard.

Itulah sedikit pengenal mengenai pseudo-classes dan pseudo-elements, silahkan dikembangkan kembali buat teman-teman yang baru belajar CSS, Kita lanjutkan ke tutorial CSS berikunya pada postingan yang akan datang. Semoga bermanfaat.