Podcast CSS - 014: Elemen-pseudo
Jika Anda memiliki artikel konten dan ingin huruf pertama menjadi drop cap yang jauh lebih besar— bagaimana cara mencapainya?
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 (misalnyabackground-image
)border
properti (misalnyaborder-color
)float
- Properti
font
(sepertifont-size
danfont-weight
) - properti teks (seperti
text-decoration
danword-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
propertifont
propertitext
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
dantransition
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 bukanbackground-image
text
properti
::placeholder
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
propertifont
propertitext
properti
::cue
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
content: '';
.::first-paragraph
::after
content: '';
.::marker
::pencil
:active
{i>Pseudo-element<i} dapat ditemukan di file HTML.