Elemen semu

Podcast CSS - 014: Elemen-elemen Pseudo

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

Pada CSS, Anda dapat menggunakan elemen semu ::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 semu seperti menambahkan atau menargetkan elemen tambahan tanpa harus menambahkan lebih banyak HTML. Contoh solusi ini, menggunakan ::first-letter, adalah salah satu dari sekian banyak {i>pseudo-element<i}. Mereka memiliki berbagai peran, Dalam pelajaran ini Anda akan mempelajari elemen-elemen pseudo yang tersedia dan bagaimana Anda dapat menggunakannya.

::before dan ::after

Baik ::before dan ::after elemen pseudo 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 yang kosong— tetapi perhatikan bahwa apa pun selain {i>string<i} kosong kemungkinan akan dibacakan oleh pembaca layar. Anda dapat menambahkan gambar url, yang akan menyisipkan gambar pada dimensi aslinya, sehingga Anda tidak akan dapat mengubah ukurannya. Anda juga dapat menyisipkan counter

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

::first-letter

Kita telah menemui elemen-pseudo ini di awal pelajaran. Perlu diketahui bahwa tidak semua properti CSS dapat digunakan ketika menarget ::first-letter Properti yang tersedia adalah:

• color
• Properti background (seperti background-image)
• Properti border (seperti 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

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

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

Seperti elemen semu ::first-letter, hanya ada sebagian properti CSS yang dapat Anda gunakan:

• color
• background properti
• font properti
• text properti

::backdrop

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

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

::marker

::marker elemen semu 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 menyetel simbol plus dan minus untuk status tertutup dan kosong elemen <summary>, misalnya.

::selection

::selection elemen semu memungkinkan Anda menata gaya tampilan teks yang dipilih.

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

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

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

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

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

::placeholder

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

input::placeholder {
  color: darkcyan;
}

::placeholder hanya mendukung subset aturan CSS:

• color
• background properti
• font properti
• text properti

::cue

Terakhir dalam tur elemen-pseudo ini adalah Elemen pseudo ::cue. Ini memungkinkan Anda untuk 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