Podcast CSS - 015: Class semu
Misalnya Anda memiliki formulir pendaftaran email, dan Anda ingin bidang formulir email memiliki batas merah jika berisi alamat email yang tidak valid.
Bagaimana Anda melakukannya?
Anda dapat menggunakan class pseudo CSS :invalid
,
yang merupakan salah satu dari banyak pseudo-class yang disediakan browser.
Class pseudo 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 selektor, dan modul ini akan memandu Anda mempelajarinya secara lebih mendetail.
Tidak seperti elemen pseudo, yang dapat Anda pelajari lebih lanjut di modul sebelumnya, class pseudo terkait ke status tertentu tempat elemen mungkin berada, bukannya menata gaya di bagian elemen tersebut secara umum.
Status interaktif
Kelas semu 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 terhubung ke status tersebut dengan
:hover
untuk menerapkan gaya.
Ini adalah cara yang berguna untuk memberikan petunjuk bahwa suatu elemen dapat berinteraksi.
:active
Status ini dipicu saat elemen berinteraksi secara aktif— seperti klik—sebelum klik dirilis. Jika perangkat penunjuk seperti mouse digunakan, status ini adalah saat klik dimulai dan belum dirilis.
:focus
, :focus-within
, dan :focus-visible
Jika sebuah elemen dapat menerima fokus, seperti <button>
,
Anda dapat bereaksi terhadap status tersebut dengan class pseudo :focus
.
Anda juga dapat bereaksi jika elemen turunan elemen menerima fokus dengan
:focus-within
.
Elemen yang dapat difokuskan, seperti tombol, akan menampilkan lingkaran fokus saat sedang menjadi fokus—bahkan saat diklik. Dalam situasi seperti ini, developer akan menerapkan CSS berikut:
button:focus {
outline: none;
}
CSS ini menghapus lingkaran fokus browser default saat elemen menerima fokus,
yang menimbulkan masalah aksesibilitas bagi pengguna yang membuka halaman web dengan keyboard.
Jika tidak ada gaya fokus,
mereka tidak akan dapat melacak posisi fokus saat ini ketika 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
Class semu :target
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;
}
Hal ini berguna untuk menyoroti area yang mungkin secara khusus ditautkan, seperti konten utama di situs, melalui link lewati.
Negara bagian bersejarah
:link
Class semu :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 class pseudo
:visited
.
Ini adalah kebalikan dari :link
, tetapi Anda memiliki lebih sedikit properti CSS yang dapat digunakan untuk alasan keamanan.
Anda hanya dapat menata gaya color
, background-color
,
border-color
, outline-color
serta warna SVG fill
dan stroke
.
Pentingnya urutan
Jika Anda menentukan gaya :visited
, gaya tersebut dapat diganti oleh class pseudo link dengan setidaknya kekhususan yang sama.
Oleh karena itu, sebaiknya gunakan aturan LVHA untuk menata gaya link dengan class pseudo dalam urutan tertentu: :link
, :visited
, :hover
, :active
.
a:link {}
a:visited {}
a:hover {}
a:active {}
Status formulir
Class pseudo berikut dapat memilih elemen formulir, dalam berbagai status tempat elemen tersebut mungkin berada selama interaksi dengannya.
:disabled
dan :enabled
Jika elemen formulir,
seperti <button>
dinonaktifkan oleh browser,
Anda dapat terhubung ke status tersebut dengan
class pseudo :disabled
.
Class pseudo :enabled
tersedia untuk status yang berlawanan,
meskipun elemen formulir juga :enabled
secara default,
sehingga Anda mungkin tidak perlu menjangkau class pseudo ini.
:checked
dan :indeterminate
Class semu :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 status saat keduanya tidak dicentang atau tidak dicentang.
Ini dikenal sebagai
status :indeterminate
.
Contoh status ini adalah ketika Anda memiliki kontrol "pilih semua" yang memeriksa semua kotak centang dalam grup. Jika pengguna kemudian menghapus centang pada salah satu kotak centang ini, kotak centang root tidak akan lagi merepresentasikan "semua" yang dicentang, sehingga harus dimasukkan ke dalam status 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 aplikasi yang dibutuhkan.
:placeholder-shown
Jika kolom formulir memiliki atribut placeholder
dan tidak memiliki nilai,
class pseudo :placeholder-shown
dapat digunakan untuk melampirkan gaya ke status tersebut.
Segera setelah ada konten di kolom, baik memiliki placeholder
atau tidak, status ini tidak akan berlaku lagi.
Status validasi
Anda dapat merespons validasi formulir HTML dengan class pseudo seperti
:valid
,
:invalid
, dan
:in-range
.
Class pseudo :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,
membantu mereka memahami bahwa mereka dapat berpindah ke kolom berikutnya dengan aman.
Class pseudo :in-range
tersedia jika input memiliki min
dan max
,
seperti input numerik dan nilai berada dalam batas tersebut.
Dengan formulir HTML,
Anda dapat menentukan bahwa kolom wajib diisi dengan atribut required
.
Class semu :required
akan tersedia untuk kolom yang wajib diisi.
Kolom yang tidak wajib dapat dipilih dengan
class pseudo :optional
.
Memilih elemen berdasarkan indeks, urutan, dan kemunculannya
Ada sekelompok class pseudo yang memilih item berdasarkan posisi item dalam dokumen.
:first-child
dan :last-child
Jika ingin menemukan item pertama atau terakhir,
Anda dapat menggunakan
:first-child
dan
:last-child
.
Class pseudo ini akan menampilkan elemen pertama atau terakhir dalam grup elemen yang seinduk.
:only-child
Anda juga dapat memilih elemen yang tidak memiliki seinduk,
dengan
class pseudo :only-child
.
:first-of-type
dan :last-of-type
Anda dapat memilih
:first-of-type
dan
:last-of-type
yang pada awalnya,
terlihat memiliki fungsi 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 paragraf, bukan div. Class pseudo :first-of-type
berguna dalam konteks ini.
.my-parent div:first-of-type {
color: red;
}
Meskipun <div>
pertama adalah turunan kedua,
hal ini masih merupakan jenis pertama di dalam elemen .my-parent
,
jadi dengan aturan ini, warnanya akan merah.
:nth-child
dan :nth-of-type
Anda juga tidak terbatas pada turunan dan jenis pertama dan terakhir.
Dengan class pseudo :nth-child
dan
:nth-of-type
,
Anda dapat menentukan elemen yang ada di indeks tertentu.
Pengindeksan di pemilih CSS dimulai dari 1.
Anda juga dapat meneruskan lebih dari satu indeks ke dalam class pseudo 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 seberapa banyak Anda mengalikan indeks tersebut.
Misalkan Anda memiliki 7 item <li>
.
Item pertama yang dipilih adalah 3 karena 3n+3
diterjemahkan ke (3 * 0) + 3
.
Iterasi berikutnya akan memilih item 6 karena n
sekarang telah 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 pada penguji turunan ke-n atau alat pemilih jumlah ini.
:only-of-type
Terakhir, Anda dapat menemukan satu-satunya elemen dari jenis tertentu dalam sekelompok seinduk dengan
:only-of-type
.
Hal ini berguna jika Anda ingin memilih daftar yang berisi satu item saja,
atau jika Anda ingin menemukan satu-satunya elemen yang dicetak tebal dalam paragraf.
Menemukan elemen kosong
Terkadang ada baiknya mengidentifikasi elemen yang benar-benar kosong, dan ada juga class pseudo untuk hal tersebut.
:empty
Jika elemen tidak memiliki turunan, class pseudo
:empty
berlaku untuk turunan tersebut.
Turunan tidak hanya elemen HTML atau node teks: turunan juga dapat berupa spasi kosong,
yang dapat membingungkan ketika Anda men-debug HTML berikut dan bertanya-tanya mengapa HTML berikut tidak berfungsi dengan :empty
:
<div>
</div>
Alasannya adalah ada spasi kosong di antara <div>
pembuka dan penutup,
sehingga kosong tidak akan berfungsi.
Class pseudo :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 yang menyimpang dan kosong.
<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 class pseudo membantu Anda menulis CSS yang lebih ringkas.
:is()
Jika 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 class pseudo :is()
, Anda dapat menulis versi yang lebih ringkas:
.post :is(h2, li, img) {
…
}
Class pseudo :is
tidak hanya lebih ringkas daripada daftar pemilih, tetapi juga lebih memaafkan.
Pada umumnya,
jika ada error atau pemilih yang tidak didukung dalam daftar pemilih,
seluruh daftar pemilih tidak akan berfungsi lagi.
Jika terjadi error dalam pemilih yang diteruskan dalam class pseudo :is
,
pemilih 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;
}
Class pseudo :not
juga dapat membantu Anda meningkatkan aksesibilitas.
Misalnya, <img>
harus memiliki alt
, meskipun nilai itu kosong,
sehingga Anda dapat menulis aturan CSS yang menambahkan garis batas tebal berwarna merah ke gambar yang tidak valid:
img:not([alt]) {
outline: 10px red;
}
Menguji pemahaman Anda
Uji pengetahuan Anda tentang pseudo class
Class pseudo bertindak seolah-olah class telah diterapkan secara dinamis ke elemen, sedangkan elemen pseudo bertindak pada elemen itu sendiri.
:
tunggal atau ganda sebagai karakter pembeda utama dalam pemilihManakah dari opsi berikut yang merupakan class pseudo fungsional?
:is()
:target
()
setelahnya, untuk menunjukkan bahwa class tersebut menerima parameter.:empty
()
setelahnya, untuk menunjukkan bahwa class tersebut menerima parameter.:not()
Manakah dari pseudo-class berikut yang disebabkan oleh interaksi pengguna?
:hover
:press
:squeeze
:target
:focus-within
Manakah dari berikut ini yang merupakan class pseudo status <form>
?
:enabled
:fresh
:indeterminate
:checked
:in-range
:loading
:valid