Pseudo-element CSS

Apa itu pseudo-element?

Pseudo-element CSS digunakan untuk mengatur gaya bagian yang ditentukan elemen.

Contohnya, dapat digunakan untuk:

  • Mengatur gaya huruf pertama dan baris pertama elemen
  • Menyisipkan konten sebelum atau setelah konten elemen

Sintaks

Sintaks pseudo-element:

selector::pseudo-element {
  property: value;
}

Pseudo-element ::first-line

::first-line Pseudo-element digunakan untuk menambahkan gaya khusus ke baris pertama teks.

Contoh berikut ini menambahkan gaya untuk baris pertama semua elemen <p>:

Contoh

p::first-line {
  color: #ff0000;
  font-variant: small-caps;
}

Coba sendiri

Perhatian:::first-line Pseudo-element hanya dapat diterapkan untuk elemen blok.

Properti berikut ini berlaku untuk ::first-line Pseudo-element:

  • Properti Font
  • Properti Warna
  • Properti Latar Belakang
  • word-spacing
  • letter-spacing
  • text-decoration
  • vertical-align
  • text-transform
  • line-height
  • clear

Perhatian:sintaks tanda seru ganda - ::first-line bandingkan :first-line

Dalam CSS3, tanda seru ganda menggantikan sintaks tanda seru tunggal untuk pseudo-element. Ini adalah upaya W3C untuk membedakanPseudo-classdanPseudo-elementPercobaan.

Dalam CSS2 dan CSS1, pseudo-class dan pseudo-element menggunakan sintaks tanda seru tunggal.

Untuk kompatibilitas mendalam, pseudo-element CSS2 dan CSS1 dapat menerima sintaks tanda seru tunggal.

Pseudo-element ::first-letter

::first-letter Pseudo-element digunakan untuk menambahkan gaya khusus ke huruf pertama teks.

Contoh berikut ini mengatur format huruf pertama teks untuk semua elemen <p>:

Contoh

p::first-letter {
  color: #ff0000;
  font-size: xx-large;
}

Coba sendiri

Perhatian:::first-letter Pseudo-element hanya berlaku untuk elemen blok.

Properti berikut ini berlaku untuk pseudo-element ::first-letter:

  • Properti Font
  • Properti Warna
  • Properti Latar Belakang
  • Properti Margin
  • Properti Padding
  • Properti Border
  • text-decoration
  • vertical-align (hanya saat "float" adalah "none")
  • text-transform
  • line-height
  • float
  • clear

Pseudo-element dan kelas CSS

Pseudo-element dapat digunakan bersama dengan kelas CSS:

Contoh

p.intro::first-letter {
  color: #ff0000;
  font-size: 200%;
}

Coba sendiri

Contoh di atas akan menampilkan huruf pertama paragraf dengan warna merah dan huruf yang besar untuk kelas "intro".

Banyak pseudo-element

Juga dapat digabungkan beberapa pseudo-element.

Dalam contoh di bawah ini, huruf pertama paragraf akan berwarna merah dengan ukuran huruf xx-large. Bagian sisanya baris pertama akan berwarna biru dan menggunakan huruf kecil kapital. Bagian sisanya paragraf akan berukuran huruf dan warna default:

Contoh

p::first-letter {
  color: #ff0000;
  font-size: xx-large;
}
p::first-line {
  color: #0000ff;
  font-variant: small-caps;
}

Coba sendiri

CSS - pseudo-element ::before

::before Pseudo-element dapat digunakan untuk menambahkan beberapa konten sebelum konten elemen.

Contoh di bawah ini menambahkan gambar sebelum konten elemen <h1>.

Contoh

h1::before {
  content: url(smiley.gif);
}

Coba sendiri

CSS - pseudo-element ::after

::after Pseudo-element dapat digunakan untuk menambahkan beberapa konten setelah konten elemen.

Contoh di bawah ini menambahkan gambar setelah konten elemen <h1>.

Contoh

h1::after {
  content: url(smiley.gif);
}

Coba sendiri

CSS - pseudo-element ::selection

::selection pseudo-element untuk cocokkan bagian elemen yang dipilih pengguna.

Berikut ini adalah properti CSS yang dapat diterapkan ::selection:

  • color
  • background
  • cursor
  • outline

Contoh di bawah ini menampilkan teks yang dipilih di latar belakang kuning dengan teks merah:

Contoh

::selection {
  color: red; 
  background: yellow;
}

Coba sendiri

Semua pseudo-element CSS

Pemilih Contoh Deskripsi contoh
::after p::after Masukkan konten setelah setiap elemen <p>.
::before p::before Masukkan konten sebelum setiap elemen <p>.
::first-letter p::first-letter Pilih huruf pertama setiap elemen <p>.
::first-line p::first-line Pilih setiap elemen <p> pertama baris.
::selection p::selection Pilih bagian elemen yang dipilih pengguna.

Semua pseudo-kelas CSS

Pemilih Contoh Deskripsi contoh
:active a:active Pilih tautan yang aktif.
:checked input:checked Pilih setiap elemen <input> yang dipilih.
:disabled input:disabled Pilih setiap elemen <input> yang dinonaktifkan.
:empty p:empty Pilih setiap elemen <p> yang tidak memiliki anak.
:enabled input:enabled Pilih setiap elemen <input> yang diaktifkan.
:first-child p:first-child Pilih setiap elemen <p> yang ke-1 dari anak dalam orang tua.
:first-of-type p:first-of-type Pilih setiap elemen <p> yang ke-1 dalam orang tua.
:focus input:focus Pilih elemen <input> yang memiliki fokus.
:hover a:hover Pilih tautan yang diarahkan kursor mouse.
:in-range input:in-range Pilih elemen <input> dengan nilai dalam rentang yang ditentukan.
:invalid input:invalid Pilih semua elemen <input> dengan nilai yang tidak sah.
:lang(language) p:lang(it) Pilih setiap elemen <p> dengan nilai atribut lang yang dimulai dengan "it".
:last-child p:last-child Pilih setiap elemen <p> yang ke-akhir dari anak dalam orang tua.
:last-of-type p:last-of-type Pilih setiap elemen <p> yang ke-akhir dalam orang tua.
:link a:link Pilih semua tautan yang belum diakses.
:not(selector) :not(p) Pilih setiap elemen yang bukan <p>.
:nth-child(n) p:nth-child(2) Pilih setiap elemen <p> yang ke-2 dari anak dalam orang tua.
:nth-last-child(n) p:nth-last-child(2) Pilih setiap elemen <p> yang ke-2 dari bawah sebagai anak dari orang tua.
:nth-last-of-type(n) p:nth-last-of-type(2) Pilih setiap elemen <p> yang menjadi anak tunggal <p> dari orang tuanya, dihitung dari anak terakhir
:nth-of-type(n) p:nth-of-type(2) Pilih setiap elemen <p> yang menjadi elemen kedua <p> dari orang tuanya.
:only-of-type p:only-of-type Pilih setiap elemen <p> yang menjadi elemen tunggal <p> dari orang tuanya.
:only-child p:only-child Pilih elemen <p> yang menjadi anak tunggal dari orang tuanya.
:optional input:optional Pilih elemen <input> yang tidak memiliki atribut "required".
:out-of-range input:out-of-range Pilih elemen <input> yang nilai di luar rentang yang ditentukan.
:read-only input:read-only Pilih elemen <input> yang ditentukan dengan atribut "readonly".
:read-write input:read-write Pilih elemen <input> yang tidak memiliki atribut "readonly".
:required input:required Pilih elemen <input> yang ditentukan dengan atribut "required".
:root root Pilih elemen root dari elemen.
:target #news:target Pilih elemen #news yang aktif (klik URL yang mengandung nama tautan ini).
:valid input:valid Pilih semua elemen <input> yang memiliki nilai yang sah.
:visited a:visited Pilih semua tautan yang telah diakses.