Elemen semu

Podcast CSS - 014: Elemen-pseudo

Jika Anda memiliki artikel konten dan ingin huruf pertama menjadi drop cap yang jauh lebih besar— bagaimana cara mencapainya?

Beberapa paragraf teks dengan drop cap biru

Dalam CSS, Anda dapat menggunakan elemen pseudo ::first-letter untuk mencapai detail desain semacam ini.

p::first-letter {
  color: blue;
  float: left;
  font-size: 2.6em;
  font-weight: bold;
  line-height: 1;
  margin-inline-end: 0.2rem;
}

Elemen pseudo seperti menambahkan atau menargetkan elemen tambahan tanpa harus menambahkan lebih banyak HTML. Contoh solusi ini, yang menggunakan ::first-letter, adalah salah satu dari banyak elemen pseudo. Mereka memiliki berbagai peran, dan dalam pelajaran ini, Anda akan mempelajari elemen pseudo mana yang tersedia dan cara menggunakannya.

::before dan ::after

Elemen pseudo ::before dan ::after membuat elemen turunan di dalam elemen hanya jika Anda menentukan properti content.

.my-element::before {
    content: "";
}

.my-element::after {
    content: "";
}

content dapat berupa string apa pun, bahkan string kosong. Namun, perhatikan bahwa apa pun selain string kosong kemungkinan akan diumumkan oleh pembaca layar. Anda dapat menambahkan gambar url, yang akan menyisipkan gambar pada dimensi aslinya, sehingga Anda tidak dapat mengubah ukurannya. Anda juga dapat menyisipkan counter.

Setelah elemen ::before atau ::after dibuat, Anda dapat menata gayanya sesuai keinginan tanpa batas. Anda hanya dapat menyisipkan elemen ::before atau ::after ke elemen yang akan menerima elemen turunan (elemen dengan hierarki dokumen), sehingga elemen seperti <img />, <video>, dan <input> tidak akan berfungsi.

::first-letter

Kita menemui elemen semu ini di awal pelajaran. Perlu diketahui bahwa tidak semua properti CSS dapat digunakan saat menargetkan ::first-letter. Properti yang tersedia adalah:

  • color
  • background properti (misalnya background-image)
  • border properti (misalnya border-color)
  • float
  • Properti font (seperti font-size dan font-weight)
  • properti teks (seperti text-decoration dan word-spacing)
p::first-letter {
  color: goldenrod;
  font-weight: bold;
}

::first-line

Elemen pseudo ::first-line akan memungkinkan Anda menata gaya baris pertama teks hanya jika elemen dengan ::first-line diterapkan memiliki nilai display block, inline-block, list-item, table-caption, atau table-cell.

p::first-line {
  color: goldenrod;
  font-weight: bold;
}

Seperti elemen pseudo ::first-letter, hanya ada subset properti CSS yang dapat Anda gunakan:

  • color
  • background properti
  • font properti
  • text properti

::backdrop

Jika Anda memiliki elemen yang ditampilkan dalam mode layar penuh, seperti <dialog> atau <video>, Anda dapat menata gaya tampilan latar—ruang antara elemen dan bagian halaman lainnya—dengan elemen semu ::backdrop:

video::backdrop {
  background-color: goldenrod;
}

::marker

Elemen pseudo ::marker memungkinkan Anda menata gaya butir atau angka untuk item daftar atau panah elemen <summary>.

::marker {
  color: hotpink;
}

ul ::marker {
  font-size: 1.5em;
}

ol ::marker {
  font-size: 1.1em;
}

summary::marker {
  content: '\002B'' '; /* Plus symbol with space */
}

details[open] summary::marker {
  content: '\2212'' '; /* Minus symbol with space */
}

Hanya sebagian kecil properti CSS yang didukung untuk ::marker:

  • color
  • content
  • white-space
  • font properti
  • Properti animation dan transition

Anda dapat mengubah simbol penanda menggunakan properti content. Anda dapat menggunakannya untuk menetapkan simbol plus dan minus untuk, misalnya, status tertutup dan kosong elemen <summary>.

::selection

Elemen pseudo ::selection memungkinkan Anda menata gaya tampilan teks yang dipilih.

::selection {
  background: green;
  color: white;
}

Elemen semu ini dapat digunakan untuk memberi gaya semua teks yang dipilih seperti dalam demo di atas. Ini juga dapat digunakan bersama pemilih lain untuk gaya pemilihan yang lebih spesifik.

p:nth-of-type(2)::selection {
  background: darkblue;
  color: yellow;
}

Seperti elemen pseudo lainnya, hanya subset properti CSS yang diizinkan:

  • color
  • background-color, tetapi bukan background-image
  • text properti

::placeholder

Dukungan Browser

  • 57
  • 79
  • 51
  • 10.1

Sumber

Anda dapat menambahkan petunjuk helper untuk membentuk elemen, seperti <input> dengan atribut placeholder. Elemen pseudo ::placeholder memungkinkan Anda menata gaya teks tersebut.

input::placeholder {
  color: darkcyan;
}

::placeholder hanya mendukung subkumpulan aturan CSS:

  • color
  • background properti
  • font properti
  • text properti

::cue

Dukungan Browser

  • 26
  • 79
  • 55
  • 7

Sumber

Terakhir dalam tur elemen pseudo ini adalah elemen pseudo ::cue. Dengan cara ini, Anda dapat menata gaya isyarat WebVTT, yang merupakan teks dari elemen <video>.

Anda juga dapat meneruskan pemilih ke ::cue, yang memungkinkan Anda menata gaya elemen tertentu di dalam teks.

video::cue {
  color: yellow;
}

video::cue(b) {
  color: red;
}

video::cue(i) {
  color: lightpink;
}

Menguji pemahaman Anda

Uji pengetahuan Anda tentang elemen pseudo

Manakah dari berikut ini yang bukan elemen pseudo?

::before
Jangan lupa untuk menambahkan content: '';.
::first-paragraph
Ini tidak ada di CSS.
::after
Jangan lupa untuk menambahkan content: '';.
::marker
Ini adalah elemen butir saat Anda menggunakan elemen daftar atau jenis tampilan.
::pencil
Ini tidak ada di CSS.
:active
Ini adalah class semu, bukan elemen pseudo.

{i>Pseudo-element<i} dapat ditemukan di file HTML.

Benar
Meskipun DevTools mungkin menampilkan elemen pseudo di panel Elements, elemen pseudo tidak akan ditemukan di HTML, elemen tersebut dimiliki oleh browser.
Salah
Materi iklan ini dapat ditarget oleh CSS, tetapi tidak akan ditemukan di HTML.