Class Pseudo

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

Browser Support

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

Source

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

Browser Support

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

Source

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

Browser Support

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

Source

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

Browser Support

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

Source

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

Browser Support

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

Source

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

Browser Support

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

Source

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

Browser Support

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

Source

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

Browser Support

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

Source

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

Browser Support

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

Source

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

Browser Support

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

Source

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

Browser Support

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

Source

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

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

Browser Support

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

Source

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

Browser Support

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

Source

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

Browser Support

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

Source

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

Browser Support

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

Source

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

Browser Support

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

Source

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

Browser Support

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

Source

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.

Benar
Salah

Manakah dari opsi berikut yang merupakan pseudo-class fungsional?

:empty
:target
:is()
:not()

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

:focus-within
:press
:hover
:squeeze
:target

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

:indeterminate
:in-range
:valid
:loading
:checked
:enabled
:fresh