Podcast CSS - 015: Class Pseudo
Semisal Anda mendapat
formulir pendaftaran email,
dan Anda ingin kolom formulir email memiliki batas merah jika berisi alamat email yang tidak valid.
Bagaimana Anda melakukannya?
Anda dapat menggunakan class semu CSS :invalid
,
yang merupakan salah satu dari banyak pseudo-class yang disediakan browser.
Class semu memungkinkan Anda menerapkan gaya berdasarkan perubahan status dan faktor eksternal. Ini berarti bahwa desain Anda dapat bereaksi terhadap input pengguna seperti alamat email yang tidak valid. Hal ini dibahas dalam modul pemilih, dan modul ini akan membahasnya secara lebih rinci.
Tidak seperti {i>pseudo-element<i}, yang dapat Anda pelajari lebih lanjut di modul sebelumnya, pseudo-kelas mengaitkan ke status tertentu yang mungkin terdapat di dalamnya, alih-alih menata gaya bagian dari elemen tersebut.
Status interaktif
Class semu berikut berlaku karena interaksi yang dilakukan pengguna dengan halaman Anda.
:hover
Jika pengguna memiliki perangkat
penunjuk seperti {i>mouse<i} atau {i>trackpad<i},
dan mereka menempatkannya
di atas elemen,
Anda dapat mengaitkan status itu dengan
:hover
untuk menerapkan gaya.
Ini adalah cara yang berguna untuk menunjukkan bahwa elemen dapat berinteraksi.
:active
Status ini dipicu saat elemen berinteraksi secara aktif— seperti klik—sebelum klik dilepaskan. Jika perangkat penunjuk seperti {i>mouse<i} 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 itu dengan
Class semu :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 sedang fokus—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 laman web dengan {i>keyboard<i}.
Jika tidak ada gaya fokus,
mereka tidak akan dapat melacak posisi fokus saat ini saat menggunakan tombol tab.
Dengan :focus-visible
Anda dapat menyajikan gaya fokus ketika
sebuah elemen menerima fokus melalui {i>keyboard<i},
sambil menggunakan aturan outline: none
untuk mencegahnya saat perangkat pointer berinteraksi dengannya.
button:focus {
outline: none;
}
button:focus-visible {
outline: 1px solid black;
}
:target
:target
class semu memilih elemen yang memiliki id
yang cocok dengan fragmen URL.
Misalnya Anda memiliki HTML berikut:
<article id="content">
…
</article>
Anda dapat melampirkan gaya ke elemen tersebut jika URL berisi #content
.
#content:target {
background: yellow;
}
Cara ini berguna untuk menyoroti area yang mungkin terkait secara khusus, seperti konten utama di situs, melalui link lewati.
Negara bagian bersejarah
:link
:link
class semu dapat diterapkan ke elemen <a>
apa pun yang memiliki nilai href
yang belum dikunjungi.
:visited
Anda dapat mengatur gaya tautan yang telah dikunjungi pengguna dengan menggunakan
Class pseudo :visited
.
Ini adalah status kebalikan dari :link
, tetapi Anda memiliki lebih sedikit properti CSS yang dapat digunakan untuk
alasan keamanan.
Anda hanya dapat mengatur gaya color
, background-color
,
border-color
, outline-color
, serta warna SVG fill
dan stroke
.
Pentingnya urutan
Jika Anda menentukan gaya :visited
,
itu dapat diganti oleh kelas semu tautan
dengan kekhususan yang setidaknya sama.
Karena ini,
sebaiknya Anda menggunakan aturan LVHA untuk menata gaya link dengan class semu dalam urutan tertentu:
:link
, :visited
, :hover
, :active
.
a:link {}
a:visited {}
a:hover {}
a:active {}
Status formulir
{i>pseudo-class<i} berikut dapat memilih elemen bentuk, dalam berbagai keadaan di mana elemen-elemen ini mungkin berada selama interaksi dengannya.
:disabled
dan :enabled
Jika elemen formulir,
seperti <button>
dinonaktifkan oleh browser,
Anda dapat mengaitkan status itu dengan
Class semu :disabled
.
:enabled
{i>pseudo-class<i} tersedia untuk status sebaliknya,
meskipun elemen formulir juga :enabled
secara default,
oleh karena itu Anda mungkin tidak akan
mencapai kelas semu ini.
:checked
dan :indeterminate
:checked
kelas semu tersedia ketika elemen formulir pendukung,
seperti kotak centang atau
tombol pilihan dalam status dicentang.
Status :checked
adalah status biner(benar atau salah),
namun kotak centang memiliki status di antara bila tidak dicentang atau tidak dicentang.
Proses ini dikenal sebagai
Status :indeterminate
.
Contoh status ini adalah ketika Anda memiliki perintah "pilih semua" yang mencentang semua kotak centang dalam suatu grup. Jika pengguna kemudian menghapus centang di salah satu kotak centang ini, kotak centang {i>root<i} tidak lagi mewakili "semua" sedang diperiksa, sehingga harus dimasukkan ke dalam kondisi yang tidak tentu.
Elemen <progress>
juga memiliki status tidak tentu yang dapat ditata gayanya.
Kasus penggunaan yang umum adalah memberikan tampilan bergaris untuk menunjukkan tidak diketahui berapa banyak lagi yang diperlukan.
:placeholder-shown
Jika kolom formulir memiliki atribut placeholder
dan tidak ada nilai,
:placeholder-shown
kelas semu dapat digunakan untuk melampirkan gaya ke status tersebut.
Segera setelah ada konten di lapangan,
baik yang memiliki placeholder
atau tidak,
status ini tidak lagi berlaku.
Status validasi
Anda dapat merespons validasi formulir HTML dengan kelas semu seperti
:valid
,
:invalid
dan
:in-range
.
Class semu :valid
dan :invalid
berguna untuk konteks
seperti kolom email yang memiliki pattern
yang harus dicocokkan,
untuk menjadi isian yang valid.
Status nilai yang valid ini
dapat ditunjukkan kepada pengguna,
membantu mereka memahami bahwa mereka dapat
melangkah ke bidang selanjutnya dengan aman.
Class semu :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
.
:required
pseudo-class akan tersedia untuk kolom yang wajib diisi.
Kolom yang tidak wajib diisi dapat dipilih dengan
Class pseudo :optional
.
Memilih elemen menurut indeks, urutan, dan kemunculannya
Ada sekelompok class semu yang memilih item berdasarkan lokasinya dalam dokumen.
:first-child
dan :last-child
Jika Anda ingin menemukan
item pertama atau terakhir,
Anda bisa menggunakan
:first-child
dan
:last-child
.
Kelas semu ini akan menampilkan elemen pertama atau terakhir dalam grup elemen yang seinduk.
:only-child
Anda juga dapat memilih elemen
yang tidak memiliki saudara,
dengan
Class pseudo :only-child
.
:first-of-type
dan :last-of-type
Anda dapat memilih
:first-of-type
dan
:last-of-type
yang awalnya
terlihat seperti melakukan hal yang sama seperti :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 berwarna merah karena turunan pertama adalah sebuah paragraf dan bukan div.
Class semu :first-of-type
berguna dalam konteks ini.
.my-parent div:first-of-type {
color: red;
}
Meskipun <div>
pertama adalah turunan kedua,
jenis ini masih yang pertama
di dalam elemen .my-parent
,
jadi dengan aturan ini, warnanya akan merah.
:nth-child
dan :nth-of-type
Anda juga tidak dibatasi pada turunan dan jenis pertama dan terakhir.
Class :nth-child
dan
:nth-of-type
kelas-pseudo memungkinkan Anda untuk menetapkan elemen yang ada pada indeks tertentu.
Pengindeksan dalam pemilih CSS dimulai dari 1.
Anda juga dapat meneruskan lebih dari sebuah indeks ke dalam class semu ini.
Jika ingin memilih semua elemen genap, Anda dapat menggunakan :nth-child(even)
.
Anda juga dapat membuat pemilih yang lebih kompleks yang menemukan item dengan interval yang berjarak 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 berapa banyak Anda mengalikan indeks itu.
Misalkan 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
sekarang bertambah menjadi 1
,
jadi (3 * 1) + 3)
.
Ekspresi ini berfungsi untuk :nth-child
dan :nth-of-type
.
Anda dapat bermain-main dengan pemilih semacam ini penguji nth-child atau ini alat pemilih kuantitas.
:only-of-type
Terakhir, Anda dapat menemukan satu-satunya elemen
jenis tertentu dalam sekelompok saudara dengan
:only-of-type
Cara ini berguna jika Anda ingin memilih
daftar dengan hanya satu item barang,
atau jika Anda ingin menemukan satu-satunya elemen tebal dalam paragraf.
Menemukan elemen kosong
Kadang-kadang berguna untuk mengidentifikasi elemen yang benar-benar kosong, dan ada kelas semu untuk itu.
:empty
Jika suatu elemen tidak memiliki turunan, elemen
Class semu :empty
berlaku untuk kelas tersebut.
Turunan tidak hanya elemen HTML atau node teks: mereka juga dapat berupa spasi kosong,
yang dapat membingungkan saat Anda men-debug HTML berikut dan ingin tahu mengapa HTML berikut tidak berfungsi dengan :empty
:
<div>
</div>
Penyebabnya adalah ada spasi kosong di antara <div>
pembuka dan penutup,
jadi kosong tidak akan berfungsi.
Class semu :empty
dapat berguna jika Anda hanya memiliki sedikit kontrol atas HTML dan ingin menyembunyikan elemen kosong,
misalnya editor konten WYSIWYG.
Di sini, editor telah menambahkan paragraf kosong yang menyimpang.
<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 kelas semu membantu Anda menulis CSS yang lebih ringkas.
:is()
Jika Anda ingin menemukan semua elemen turunan h2
, li
, dan img
dalam elemen .post
,
Anda mungkin berpikir untuk menulis
daftar pemilih seperti ini:
.post h2,
.post li,
.post img {
…
}
Dengan :is()
kelas semu, Anda bisa menulis versi yang lebih ringkas:
.post :is(h2, li, img) {
…
}
Class semu :is
tidak hanya lebih ringkas dibandingkan daftar pemilih, tetapi juga lebih longgar.
Dalam kebanyakan kasus,
jika terjadi kesalahan atau pemilih tidak
didukung dalam daftar pemilih,
seluruh daftar pemilih tidak
akan berfungsi lagi.
Jika terjadi error pada pemilih yang diteruskan di class semu :is
,
itu akan mengabaikan pemilih yang tidak valid, tetapi menggunakan yang valid.
:not()
Anda juga dapat mengecualikan item dengan
Class pseudo :not()
.
Misalnya, Anda dapat menggunakannya untuk menata gaya semua link yang tidak memiliki atribut class
.
a:not([class]) {
color: blue;
}
Pseudo class :not
juga dapat membantu Anda meningkatkan aksesibilitas.
Misalnya, <img>
harus memiliki alt
, meskipun nilainya kosong,
sehingga Anda dapat menulis aturan CSS yang menambahkan garis luar merah tebal ke gambar yang tidak valid:
img:not([alt]) {
outline: 10px red;
}
Menguji pemahaman Anda
Menguji pengetahuan Anda tentang class pseudo
Class pseudo bertindak seolah-olah class telah diterapkan secara dinamis ke elemen, sedangkan elemen pseudo bertindak pada elemen itu sendiri.
Manakah dari berikut ini yang merupakan pseudo-class fungsional?
:is()
:not()
:target
:empty
Manakah dari pseudo-class berikut yang disebabkan oleh interaksi pengguna?
:press
:focus-within
:hover
:squeeze
:target
Manakah dari berikut ini yang merupakan class pseudo status <form>
?
:fresh
:in-range
:checked
:indeterminate
:enabled
:valid
:loading