Class Pseudo

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