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
(sepertibackground-image
) - Properti
border
(sepertiborder-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
::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
propertifont
propertitext
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
dantransition
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 bukanbackground-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
propertifont
propertitext
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
Manakah dari berikut ini yang bukan elemen semu?
::first-paragraph
::after
::before
::pencil
:active
::marker
Elemen semu dapat ditemukan di file HTML.