CSS - Kelas Pseudo

Apa Itu Pseudo-class?

Hai sana, para ahli CSS masa depan! Hari ini, kita akan menyelam ke dunia magis CSS pseudo-classes. Jangan biarkan istilah yang kemas ini menakutkan Anda – saya janji ini tidak se rumit seperti yang Anda pikirkan. Sebenarnya, sekali Anda menguasai nya, Anda akan menggunakan pseudo-classes seperti seorang pro dalam waktu singkat!

Maka, apa sebenarnya pseudo-class? Bayangkan Anda memiliki superpower yang memungkinkan Anda untuk mensytle elemen di halaman web Anda berdasarkan keadaan atau kondisinya. Itu sebenarnya apa yang pseudo-classes lakukan! Mereka memungkinkan Anda untuk menerapkan style ke elemen berdasarkan hal seperti apakah pengguna sedang hover di atasnya, apakah itu adalah anak pertama dalam daftar, atau bahkan apa bahasa halaman itu.

Sintaks

Sebelum kita melompat ke pseudo-classes khusus, mari kita lihat secara singkat sintaks. Itu sebenarnya sangat sederhana:

selector:pseudo-class {
property: value;
}

Lihat tanda titik dua (:) setelah pemilih? Itu cara Anda tahu bahwa Anda berurusan dengan pseudo-class. Mudah kan?

Pseudo-Class Hover

mari kita mulai dengan salah satu pseudo-class yang paling umum dan menyenangkan: :hover. Pseudo-class ini memungkinkan Anda mengubah style elemen saat pengguna menghover mouse di atasnya. 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 menghover di atasnya – poof! – itu berubah menjadi biru muda dengan teks hitam. Cobalah dan lihat magi terjadi!

Pseudo-Class Active

Selanjutnya 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 mengklik dan menahan tombol, itu akan berubah menjadi biru gelap dan sedikit menyusut. Itu seperti tombol mengatakan, "Hey, 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 menabahkan kepadanya.

<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 halus. Itu adalah cara bagus untuk memandu 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 mensytle setiap item ganjil dalam daftar dengan background biru muda, dan setiap item keenam dengan teks biru. Itu seperti membuat pola di dalam daftar Anda!

Pseudo-Class First-Child

Pseudo-class :first-child memilih elemen pertama diantara kelompok saudara. Itu 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 hanya 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 duga, :last-child adalah kebalikan dari :first-child. Itu memilih elemen terakhir diantara 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 tebal dan warna hijau. Itu adalah cara bagus untuk mengakhiri halangan Anda!

Pseudo-Class Lang

Pseudo-class :lang adalah sedikit lebih spesialis. Itu memungkinkan Anda untuk 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 salam berdasarkan bahasanya. Itu seperti membuat kode bahasa multilingual untuk website 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 pemilih yang Anda tentukan.

<div class="container">
<p>Saya adalah paragraf.</p>
<p class="special">Saya adalah paragraf khusus!</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, "Style semua kecuali satu hal ini!"

Daftar Pseudo-Classes CSS

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

Pseudo-Class	Deskripsi
:hover	Memilih elemen saat mouse menghover di atasnya
:active	Memilih elemen saat itu sedang diaktifkan
:focus	Memilih elemen saat itu 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 pemilih
:link	Memilih tautan yang belum dikunjungi
:visited	Memilih tautan yang sudah dikunjungi
:checked	Memilih input elemen yang dicek
:disabled	Memilih elemen yang dinonaktifkan
:empty	Memilih elemen yang tidak memiliki anak

Dan itu dia, teman-teman! Kita telah melakukan perjalanan melalui dunia CSS pseudo-classes, dari dasar hingga teknik yang lebih maju. Ingat, kunci untuk menguasai ini adalah praktik. Jadi, teruskan untuk bermain dengan pseudo-classes ini dalam proyek Anda sendiri. Sebelum Anda tahu, Anda akan membuat website dinamis dan interaktif yang merespon semua jenis tindakan pengguna dalam cara yang menarik. Selamat coding!

Credits: Image by storyset