CSS - Pseudo Classes

Apa Itu Pseudo-class?

Hai teman-teman, para ahli CSS masa depan! Hari ini, kita akan mendalam ke dunia magis CSS pseudo-classes. Jangan biarkan istilah yang keren ini membuat Anda takut – saya berjanji itu tidak akan secomplic as yang Anda pikirkan. Sebenarnya, sekali Anda menguasai nya, Anda akan menggunakan pseudo-classes seperti seorang pro dalam waktu singkat!

Maka, pseudo-class itu apa? Bayangkan Anda memiliki superpower yang memungkinkan Anda untuk mengganti gaya elemen di halaman web Anda berdasarkan keadaan atau kondisinya. Itu sebenarnya apa yang dilakukan pseudo-classes! Mereka memungkinkan Anda untuk mengapply gaya ke elemen berdasarkan hal seperti apakah pengguna mengarahkan mouse kepadanya, apakah itu anak pertama dalam daftar, atau bahkan apa bahasa halaman itu.

Sintaks

Sebelum kita masuk ke pseudo-classes khusus, mari kita lihat sintaks secara singkat. Sebenarnya itu sangat sederhana:

selector:pseudo-class {
property: value;
}

Lihat tanda titik dua (:) setelah selector? Itu adalah cara Anda mengetahui bahwa Anda berhadapan dengan pseudo-class. Mudah kan?

Pseudo-Class Hover

Mari kita mulai dengan salah satu pseudo-class paling umum dan menyenangkan: :hover. Pseudo-class ini memungkinkan Anda mengubah gaya elemen saat pengguna mengarahkan mouse kepadanya. Itu seperti magi!

<button class="my-button">Hover di atas saya!</button>

.my-button {
background-color: biru;
color: putih;
padding: 10px 20px;
border: none;
cursor: pointer;
}

.my-button:hover {
background-color: biru muda;
color: hitam;
}

Dalam contoh ini, tombol kita mulai dengan biru dan teks putih. Tetapi saat Anda mengarahkan mouse kepadanya – poof! – itu berubah menjadi biru muda dengan teks hitam. Cobalah dan lihat magi terjadi!

Pseudo-Class Active

Berikutnya adalah pseudo-class :active. Pseudo-class ini dipicu saat elemen sedang diaktifkan oleh pengguna, seperti saat mereka mengklik tombol.

<button class="my-button">Klik saya!</button>

.my-button {
background-color: biru;
color: putih;
padding: 10px 20px;
border: none;
cursor: pointer;
}

.my-button:active {
background-color: biru gelap;
transform: scale(0.95);
}

Sekarang, saat Anda menekan dan menahan tombol, itu akan berubah menjadi biru gelap dan sedikit menyusut. Itu seperti tombol mengatakan, "Hai, saya sedang dicek!"

Pseudo-Class Focus

Pseudo-class :focus sangat berguna untuk meningkatkan aksesibilitas. Ini diterapkan saat elemen menerima fokus, yang dapat terjadi saat pengguna mengklik field input atau menabinya.

<input type="text" class="my-input" placeholder="Ketik sesuatu...">

.my-input {
border: 2px solid #ccc;
padding: 5px;
}

.my-input:focus {
border-color: biru;
outline: none;
box-shadow: 0 0 5px rgba(0, 0, 255, 0.5);
}

Dengan CSS ini, saat field input diberikan fokus, itu mendapatkan border biru dan cahaya biru yang halus. Itu adalah cara yang bagus untuk mengarahkan pengguna Anda melalui formulir!

Pseudo-Class nth Child

Sekarang, mari kita menjadi sedikit lebih keren dengan pseudo-class :nth-child(). Pseudo-class ini memungkinkan Anda untuk memilih elemen berdasarkan posisinya dalam kelompok saudara.

<ul class="my-list">
<li>Item pertama</li>
<li>Item kedua</li>
<li>Item ketiga</li>
<li>Item keempat</li>
<li>Item kelima</li>
</ul>

.my-list li:nth-child(odd) {
background-color: #f2f2f2;
}

.my-list li:nth-child(3n) {
color: biru;
}

Dalam contoh ini, kita mengganti setiap item angka ganjil dengan background abu-abu pucat, dan setiap item yang kelipatan tiga dengan teks biru. Itu seperti membuat pola di daftar Anda!

Pseudo-Class First-Child

Pseudo-class :first-child memilih elemen pertama dalam kelompok saudara. Itu sangat bagus untuk memberikan perhatian khusus ke item pertama dalam daftar atau paragraf pertama dalam artikel.

<div class="container">
<p>Saya adalah paragraf pertama!</p>
<p>Saya adalah paragraf biasa.</p>
<p>Saya juga!</p>
</div>

.container p:first-child {
font-weight: tebal;
color: biru;
}

Sekarang paragraf pertama menonjol dari yang lain. Itu seperti memberikan VIP pass ke elemen pertama Anda!

Pseudo-Class Last-Child

Seperti yang Anda mungkin猜测, :last-child adalah kebalikan dari :first-child. Itu memilih elemen terakhir dalam kelompok saudara.

<ul class="my-list">
<li>Item pertama</li>
<li>Item kedua</li>
<li>Item ketiga</li>
<li>Item terakhir!</li>
</ul>

.my-list li:last-child {
font-style: italic;
color: hijau;
}

Dengan CSS ini, item terakhir dalam daftar mendapatkan gaya huruf miring dan warna hijau. Itu adalah cara yang bagus untuk menutup halangan!

Pseudo-Class Lang

Pseudo-class :lang adalah sedikit lebih spesialis. Itu memungkinkan Anda memilih elemen berdasarkan bahasa dokumen atau elemen.

<p lang="en">Hello, World!</p>
<p lang="fr">Bonjour, le Monde!</p>
<p lang="es">¡Hola, Mundo!</p>

p:lang(en) {
color: biru;
}

p:lang(fr) {
color: merah;
}

p:lang(es) {
color: hijau;
}

CSS ini akan memberikan warna ke setiap祝贺 berdasarkan bahasanya. Itu seperti membuat kode bahasa berwarna untuk situs web Anda!

Pseudo-Class Not

Terakhir tapi bukan paling kurang, mari kita lihat pseudo-class :not(). Pseudo-class ini sedikit berbeda – itu memilih elemen yang TIDAK cocok dengan selector yang Anda tentukan.

<div class="container">
<p>Saya adalah paragraf.</p>
<p class="special">Saya adalah paragraf spesial!</p>
<p>Saya adalah paragraf lainnya.</p>
</div>

.container p:not(.special) {
color: abu-abu;
}

Dalam kasus ini, semua paragraf kecuali yang memiliki kelas "special" akan berwarna abu-abu. Itu seperti mengatakan, "Gaya ini kecuali elemen ini!"

Daftar Pseudo-Classes CSS

Ada banyak pseudo-classes lainnya yang tersedia di CSS. Berikut adalah tabel dari beberapa yang umum:

Pseudo-Class	Deskripsi
:hover	Memilih elemen saat mouse mengarahkan kepadanya
:active	Memilih elemen saat sedang diaktifkan
:focus	Memilih elemen saat mendapat fokus
:nth-child()	Memilih elemen berdasarkan posisinya dalam kelompok saudara
:first-child	Memilih anak pertama elemen
:last-child	Memilih anak terakhir elemen
:lang()	Memilih elemen berdasarkan bahasa
:not()	Memilih elemen yang tidak cocok dengan selector
:link	Memilih tautan yang belum dikunjungi
:visited	Memilih tautan yang sudah dikunjungi
:checked	Memilih elemen input yang dicentang
:disabled	Memilih elemen yang dinonaktifkan
:empty	Memilih elemen yang tidak memiliki anak

Dan itu saja, teman-teman! Kita telah berjalan melalui dunia CSS pseudo-classes, dari dasar hingga teknik yang lebih maju. Ingat, kunci untuk menguasai ini adalah latihan. Jadi, teruskan untuk mencoba pseudo-classes ini di proyek Anda sendiri. Sebelum Anda tahu, Anda akan menciptakan situs web dinamis dan interaktif yang merespon tindakan pengguna dalam banyak cara yang menarik. Selamat berkoding!

Credits: Image by storyset