Class Pseudo

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

Dukungan Browser

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 2.

Sumber

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

Dukungan Browser

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Sumber

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

Dukungan Browser

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Sumber

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

Dukungan Browser

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.3.

Sumber

: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

Dukungan Browser

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Sumber

: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

Dukungan Browser

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 3.1.

Sumber

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

Dukungan Browser

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 3.1.

Sumber

: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

Dukungan Browser

  • Chrome: 47.
  • Edge: 79.
  • Firefox: 51.
  • Safari: 9.

Sumber

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

Dukungan Browser

  • Chrome: 10.
  • Edge: 12.
  • Firefox: 4.
  • Safari: 5.

Sumber

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

Dukungan Browser

  • Chrome: 4.
  • Edge: 12.
  • Firefox: 3.
  • Safari: 3.1.

Sumber

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

Dukungan Browser

  • Chrome: 2.
  • Edge: 12.
  • Firefox: 1.5.
  • Safari: 3.1.

Sumber

Anda juga dapat memilih elemen yang tidak memiliki saudara, dengan Class pseudo :only-child.

:first-of-type dan :last-of-type

Dukungan Browser

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 3.5.
  • Safari: 3.1.

Sumber

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

Dukungan Browser

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 3.5.
  • Safari: 3.1.

Sumber

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

Dukungan Browser

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 3.5.
  • Safari: 3.1.

Sumber

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

Dukungan Browser

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 3.1.

Sumber

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()

Dukungan Browser

  • Chrome: 88.
  • Edge: 88.
  • Firefox: 78.
  • Safari: 14.

Sumber

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()

Dukungan Browser

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 3.1.

Sumber

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.

Benar
Perhatikan penggunaan : tunggal atau ganda sebagai karakter pembeda utama di pemilih
Salah
Elemen semu untuk bagian, class Pseudo untuk status.

Manakah dari berikut ini yang merupakan pseudo-class fungsional?

:is()
🎉
:target
Class semu fungsional memiliki () setelahnya, untuk menunjukkan bahwa class tersebut menerima parameter.
:empty
Class semu fungsional memiliki () setelahnya, untuk menunjukkan bahwa class tersebut menerima parameter.
:not()
🎉

Manakah dari pseudo-class berikut yang disebabkan oleh interaksi pengguna?

:hover
🎉
:press
Coba lagi.
:squeeze
Coba lagi.
:target
🎉
:focus-within
🎉

Manakah dari berikut ini yang merupakan class pseudo status <form>?

:enabled
🎉
:fresh
Coba lagi.
:indeterminate
🎉
:checked
🎉
:in-range
🎉
:loading
Coba lagi.
:valid
🎉