The CSS Podcast - 015: Pseudo-class
Misalnya, Anda memiliki formulir pendaftaran email, dan ingin kolom formulir email memiliki batas merah jika berisi alamat email yang tidak valid.
Bagaimana cara melakukannya?
Anda dapat menggunakan pseudo-class CSS :invalid
,
yang merupakan salah satu dari banyak pseudo-class yang disediakan browser.
Pseudo-class memungkinkan Anda menerapkan gaya berdasarkan perubahan status dan faktor eksternal. Artinya, desain Anda dapat bereaksi terhadap input pengguna seperti alamat email yang tidak valid. Hal ini dibahas dalam modul pemilih, dan modul ini akan memandu Anda mempelajarinya secara lebih mendetail.
Tidak seperti pseudo-elemen, yang dapat Anda pelajari lebih lanjut di modul sebelumnya, pseudo-class terhubung ke status tertentu yang mungkin dimiliki elemen, bukan gaya bagian elemen secara umum.
Status interaktif
Pseudo-class berikut berlaku karena interaksi yang dilakukan pengguna dengan halaman Anda.
:hover
Jika pengguna memiliki perangkat penunjuk seperti mouse atau trackpad,
dan mereka menempatkannya di atas elemen,
Anda dapat mengaitkan ke status tersebut dengan
:hover
untuk menerapkan gaya.
Ini adalah cara yang berguna untuk mengisyaratkan bahwa elemen dapat berinteraksi.
:active
Status ini dipicu saat elemen secara aktif berinteraksi— seperti klik—sebelum klik dilepaskan. Jika perangkat penunjuk seperti mouse digunakan, status ini adalah saat klik dimulai dan belum dilepaskan.
:focus
, :focus-within
, dan :focus-visible
Jika elemen dapat menerima fokus—seperti <button>
—
Anda dapat bereaksi terhadap status tersebut dengan
pseudo-class :focus
.
Anda juga dapat bereaksi jika elemen turunan dari elemen Anda menerima fokus dengan
:focus-within
.
Elemen yang dapat difokuskan, seperti tombol, akan menampilkan cincin fokus saat difokuskan—bahkan saat diklik. Dalam situasi seperti ini, developer akan menerapkan CSS berikut:
button:focus {
outline: none;
}
CSS ini menghapus cincin fokus browser default saat elemen menerima fokus,
yang menimbulkan masalah aksesibilitas bagi pengguna yang menavigasi halaman web dengan keyboard.
Jika tidak ada gaya fokus,
pengguna tidak akan dapat melacak posisi fokus saat ini saat menggunakan tombol tab.
Dengan :focus-visible
,
Anda dapat menampilkan gaya fokus saat elemen menerima fokus melalui keyboard,
sekaligus menggunakan aturan outline: none
untuk mencegahnya saat perangkat pointer berinteraksi dengannya.
button:focus {
outline: none;
}
button:focus-visible {
outline: 1px solid black;
}
:target
Pseudo-class :target
memilih elemen yang memiliki id
yang cocok dengan fragmen URL.
Misalkan Anda memiliki HTML berikut:
<article id="content">
…
</article>
Anda dapat melampirkan gaya ke elemen tersebut saat URL berisi #content
.
#content:target {
background: yellow;
}
Hal ini berguna untuk menyoroti area yang mungkin ditautkan secara khusus, seperti konten utama di situs, melalui link lewati.
Status historis
:link
Pseudo-class :link
dapat diterapkan ke elemen <a>
apa pun yang memiliki nilai href
yang belum dikunjungi.
:visited
Anda dapat menata gaya link yang telah dikunjungi oleh pengguna menggunakan
pseudo-class :visited
.
Ini adalah status yang berlawanan dengan :link
, tetapi Anda memiliki lebih sedikit properti CSS untuk digunakan karena
alasan keamanan.
Anda hanya dapat menata gaya color
, background-color
,
border-color
, outline-color
, dan warna SVG fill
dan stroke
.
Pentingnya urutan
Jika Anda menentukan gaya :visited
,
gaya tersebut dapat diganti oleh pseudo-class link dengan setidaknya spesifitas yang sama.
Oleh karena itu,
sebaiknya gunakan aturan LVHA untuk menata gaya link dengan pseudo-class dalam urutan tertentu:
:link
, :visited
, :hover
, :active
.
a:link {}
a:visited {}
a:hover {}
a:active {}
Status formulir
Pseudoclass berikut dapat memilih elemen formulir, dalam berbagai status yang mungkin dimiliki elemen ini selama interaksi dengan elemen tersebut.
:disabled
dan :enabled
Jika elemen formulir,
seperti <button>
dinonaktifkan oleh browser,
Anda dapat mengaitkan ke status tersebut dengan
pseudo-class :disabled
.
Pseudo-class :enabled
tersedia untuk status yang berlawanan,
meskipun elemen formulir juga :enabled
secara default,
sehingga Anda mungkin tidak akan menggunakan pseudo-class ini.
:checked
dan :indeterminate
Pseudo-class :checked
tersedia saat elemen formulir pendukung,
seperti kotak centang atau tombol pilihan, dalam status dicentang.
Status :checked
adalah status biner(benar atau salah),
tetapi kotak centang memiliki status di antara keduanya jika tidak dicentang atau tidak dicentang.
Hal ini dikenal sebagai
status :indeterminate
.
Contoh status ini adalah saat Anda memiliki kontrol "pilih semua" yang mencentang semua kotak centang dalam grup. Jika pengguna kemudian menghapus centang pada salah satu kotak centang ini, kotak centang root tidak akan lagi mewakili "semua" yang dicentang, sehingga harus dimasukkan ke dalam status yang tidak ditentukan.
Elemen <progress>
juga memiliki status tidak tentu yang dapat diberi gaya.
Kasus penggunaan yang umum adalah memberikan tampilan bergaris untuk menunjukkan bahwa tidak diketahui berapa banyak lagi yang diperlukan.
:placeholder-shown
Jika kolom formulir memiliki atribut placeholder
dan tidak ada nilai,
pseudo-class :placeholder-shown
dapat digunakan untuk melampirkan gaya ke status tersebut.
Segera setelah ada konten di kolom,
baik yang memiliki placeholder
maupun tidak,
status ini tidak akan berlaku lagi.
Status validasi
Anda dapat merespons validasi formulir HTML dengan pseudo-class seperti
:valid
,
:invalid
, dan
:in-range
.
Pseudo-class :valid
dan :invalid
berguna untuk konteks
seperti kolom email yang memiliki pattern
yang perlu dicocokkan,
agar menjadi kolom yang valid.
Status nilai yang valid ini dapat ditampilkan kepada pengguna,
sehingga membantu mereka memahami bahwa mereka dapat beralih ke kolom berikutnya dengan aman.
Pseudo-class :in-range
tersedia jika input memiliki min
dan max
,
seperti input numerik dan nilainya berada dalam batas tersebut.
Dengan formulir HTML,
Anda dapat menentukan bahwa kolom wajib diisi dengan atribut required
.
Pseudo-class :required
akan tersedia untuk kolom wajib diisi.
Kolom yang tidak wajib dapat dipilih dengan
pseudo-class :optional
.
Memilih elemen berdasarkan indeks, urutan, dan kemunculan
Ada sekelompok pseudo-class yang memilih item berdasarkan lokasinya dalam dokumen.
:first-child
dan :last-child
Jika ingin menemukan item pertama atau terakhir,
Anda dapat menggunakan
:first-child
dan
:last-child
.
Pseudoclass ini akan menampilkan elemen pertama atau terakhir dalam grup elemen yang bersaudara.
:only-child
Anda juga dapat memilih elemen yang tidak memiliki elemen yang sama,
dengan
pseudo-class :only-child
.
:first-of-type
dan :last-of-type
Anda dapat memilih
:first-of-type
dan
:last-of-type
yang pada awalnya
terlihat seperti melakukan hal yang sama dengan :first-child
dan :last-child
, tetapi pertimbangkan HTML ini:
<div class="my-parent">
<p>A paragraph</p>
<div>A div</div>
<div>Another div</div>
</div>
Dan CSS ini:
.my-parent div:first-child {
color: red;
}
Tidak ada elemen yang akan diwarnai merah karena turunan pertama adalah paragraf, bukan div.
Pseudo-class :first-of-type
berguna dalam konteks ini.
.my-parent div:first-of-type {
color: red;
}
Meskipun <div>
pertama adalah turunan kedua,
elemen ini masih merupakan jenis pertama di dalam elemen .my-parent
,
sehingga dengan aturan ini, elemen ini akan berwarna merah.
:nth-child
dan :nth-of-type
Anda juga tidak terbatas pada turunan dan jenis pertama dan terakhir.
Pseudo-class :nth-child
dan
:nth-of-type
memungkinkan Anda menentukan elemen yang berada di indeks tertentu.
Pengindeksan di pemilih CSS dimulai dari 1.
Anda juga dapat meneruskan lebih dari satu indeks ke dalam pseudoclass ini.
Jika ingin memilih semua elemen genap, Anda dapat menggunakan :nth-child(even)
.
Anda juga dapat membuat pemilih yang lebih kompleks yang menemukan item pada interval yang diatur secara teratur, menggunakan mikrosintaksis An+B.
li:nth-child(3n+3) {
background: yellow;
}
Pemilih ini memilih setiap item ketiga,
mulai dari item 3.
n
dalam ekspresi ini adalah indeks,
yang dimulai dari nol, 3 (3n
) adalah jumlah penggandaan indeks tersebut.
Misalnya, Anda memiliki 7 item <li>
.
Item pertama yang dipilih adalah 3 karena 3n+3
diterjemahkan menjadi (3 * 0) + 3
.
Iterasi berikutnya akan memilih item 6 karena n
kini telah bertambah menjadi 1
,
jadi (3 * 1) + 3)
.
Ekspresi ini berfungsi baik untuk :nth-child
maupun :nth-of-type
.
Anda dapat mencoba pemilih semacam ini di penguji turunan ke-n atau alat pemilih jumlah ini.
:only-of-type
Terakhir, Anda dapat menemukan satu-satunya elemen dari jenis tertentu dalam grup saudara dengan
:only-of-type
.
Hal ini berguna jika Anda ingin memilih daftar yang hanya berisi satu item,
atau jika Anda ingin menemukan satu-satunya elemen tebal dalam paragraf.
Menemukan elemen kosong
Terkadang, mengidentifikasi elemen yang benar-benar kosong dapat berguna, dan ada juga pseudo-class untuk itu.
:empty
Jika elemen tidak memiliki turunan, pseudo-class :empty
akan berlaku untuk elemen tersebut.
Turunan bukan hanya elemen HTML atau node teks: turunan juga dapat berupa spasi kosong,
yang dapat membingungkan saat Anda men-debug HTML berikut dan bertanya-tanya mengapa HTML tersebut tidak berfungsi dengan :empty
:
<div>
</div>
Alasannya adalah ada beberapa spasi kosong di antara <div>
pembuka dan penutup,
sehingga kosong tidak akan berfungsi.
Pseudo-class :empty
dapat berguna jika Anda memiliki sedikit kontrol atas HTML dan ingin menyembunyikan elemen kosong,
seperti editor konten WYSIWYG.
Di sini, editor telah menambahkan paragraf kosong yang tidak perlu.
<article class="post">
<p>Donec ullamcorper nulla non metus auctor fringilla.</p>
<p></p>
<p>Curabitur blandit tempus porttitor.</p>
</article>
Dengan :empty
, Anda dapat menemukan dan menyembunyikannya.
.post :empty {
display: none;
}
Menemukan dan mengecualikan beberapa elemen
Beberapa pseudo-class membantu Anda menulis CSS yang lebih ringkas.
:is()
Jika ingin menemukan semua elemen turunan h2
, li
, dan img
dalam elemen .post
,
Anda dapat menulis daftar pemilih seperti ini:
.post h2,
.post li,
.post img {
…
}
Dengan pseudo-class
:is()
, Anda dapat menulis versi yang lebih ringkas:
.post :is(h2, li, img) {
…
}
Pseudo-class :is
tidak hanya lebih ringkas daripada daftar pemilih, tetapi juga lebih toleran.
Pada umumnya,
jika ada error atau pemilih yang tidak didukung dalam daftar pemilih,
seluruh daftar pemilih tidak akan berfungsi lagi.
Jika ada error pada pemilih yang diteruskan dalam pseudo-class :is
, pemilih yang tidak valid akan diabaikan, tetapi pemilih yang valid akan digunakan.
:not()
Anda juga dapat mengecualikan item dengan
pseudo-class :not()
.
Misalnya, Anda dapat menggunakannya untuk menata gaya semua link yang tidak memiliki atribut class
.
a:not([class]) {
color: blue;
}
Pseudoclass :not
juga dapat membantu Anda meningkatkan aksesibilitas.
Misalnya, <img>
harus memiliki alt
, meskipun nilainya kosong, sehingga Anda dapat menulis aturan CSS yang menambahkan garis batas merah tebal ke gambar yang tidak valid:
img:not([alt]) {
outline: 10px red;
}
Memeriksa pemahaman Anda
Uji pengetahuan Anda tentang pseudo class
Pseudo-class bertindak seolah-olah class telah diterapkan secara dinamis ke elemen, sedangkan pseudo-elemen bertindak pada elemen itu sendiri.
Manakah dari opsi berikut yang merupakan pseudo-class fungsional?
:empty
:not()
:target
:is()
Manakah dari pseudo-class berikut yang disebabkan oleh interaksi pengguna?
:hover
:focus-within
:squeeze
:target
:press
Manakah dari opsi berikut yang merupakan class pseudo status <form>
?
:loading
:fresh
:in-range
:indeterminate
:checked
:valid
:enabled