Pseudo-element CSS

什么是伪元素？

CSS 伪元素用于设置元素指定部分的样式。

例如，它可用于：

  • 设置元素的首字母、首行的样式
  • 在元素的内容之前或之后插入内容

语法

伪元素的语法：

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

::first-line 伪元素

::first-line 伪元素用于向文本的首行添加特殊样式。

以下示例为所有 <p> 元素中的首行添加样式：

Contoh

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

Coba sendiri

注意：::first-line 伪元素只能应用于块级元素。

以下属性适用于 ::first-line 伪元素：

  • 属性字体
  • 属性颜色
  • 属性背景
  • word-spacing
  • letter-spacing
  • text-decoration
  • vertical-align
  • text-transform
  • line-height
  • clear

请注意双冒号表示法 - ::first-line 对比 :first-line

在 CSS3 中，双冒号取代了伪元素的单冒号表示法。这是 W3C 试图区分伪类和伪元素的尝试。

在 CSS2 和 CSS1 中，伪类和伪元素都使用了单冒号语法。

为了向后兼容，CSS2 和 CSS1 伪元素可接受单冒号语法。

::first-letter 伪元素

::first-letter 伪元素用于向文本的首字母添加特殊样式。

以下示例设置所有 <p> 元素中文本的首字母格式：

Contoh

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

Coba sendiri

注意：::first-letter 伪元素仅适用于块级元素。

以下属性适用于 ::first-letter 伪元素：

  • 属性字体
  • 属性颜色
  • 属性背景
  • 属性外边距
  • 属性内边距
  • 属性框
  • text-decoration
  • vertical-align (hanya saat "float" adalah "none")
  • text-transform
  • line-height
  • float
  • clear

Elemen pseudo dan kelas CSS

Elemen pseudo 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 ukuran font yang besar untuk class="intro".

Beberapa elemen pseudo

Juga dapat digabungkan beberapa elemen pseudo.

Dalam contoh di bawah ini, huruf pertama paragraf akan berwarna merah dan ukuran font xx-large. Bagian lain baris pertama akan berwarna biru dan digunakan dengan huruf kapital kecil. Bagian lain paragraf akan menjadi ukuran font 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 - elemen pseudo ::before

::before Elemen pseudo 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 - elemen pseudo ::after

::after Elemen pseudo 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 - elemen pseudo ::selection

::selection pada elemen pseudo untuk sebagian 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 elemen pseudo-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> paling atas.
::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 adalah pertama dari anak-anak orang tuanya.
:first-of-type p:first-of-type Pilih setiap elemen <p> yang adalah terakhir dari elemen orang tuanya.
:focus input:focus Pilih elemen <input> yang menerima perhatian.
:hover a:hover Pilih tautan yang dihantam mouse.
:in-range input:in-range Pilih setiap elemen <input> yang memiliki nilai dalam kisaran yang ditentukan.
:invalid input:invalid Pilih setiap elemen <input> yang memiliki nilai yang tidak sah.
:lang(bahasa) p:lang(it) Pilih setiap elemen <p> yang nilai atribut lang dimulai dengan "it".
:last-child p:last-child Pilih setiap elemen <p> yang adalah terakhir dari anak-anak orang tuanya.
:last-of-type p:last-of-type Pilih setiap elemen <p> yang adalah terakhir dari elemen orang tuanya.
:link a:link Pilih setiap tautan yang belum diakses.
:not(pemilih) :not(p) Pilih setiap elemen yang bukan <p>.
:nth-child(n) p:nth-child(2) Pilih setiap elemen <p> yang adalah kedua dari anak orang tuanya.
:nth-last-child(n) p:nth-last-child(2) Pilih setiap elemen <p> yang adalah kedua dari anak yang dihitung dari elemen anak terakhir.
:nth-last-of-type(n) p:nth-last-of-type(2) Pilih setiap elemen <p> yang menjadi anak tunggal <p> dari induknya, menghitung dari anak terakhir
:nth-of-type(n) p:nth-of-type(2) Pilih setiap elemen <p> yang menjadi elemen kedua <p> dari induknya.
:only-of-type p:only-of-type Pilih setiap elemen <p> yang menjadi elemen tunggal <p> dari induknya.
:only-child p:only-child Pilih elemen <p> yang menjadi anak tunggal dari induknya.
:optional input:optional Pilih elemen <input> yang tidak memiliki atribut "required".
:out-of-range input:out-of-range Pilih elemen <input> yang nilai berada di luar rentang yang dispecifikasikan.
:read-only input:read-only Pilih elemen <input> yang dispecifikasikan dengan atribut "readonly".
:read-write input:read-write Pilih elemen <input> yang tidak memiliki atribut "readonly".
:required input:required Pilih elemen <input> yang dispecifikasikan dengan atribut "required".
:root root Pilih elemen akar.
:target #news:target Pilih elemen #news yang aktif (klik URL yang mengandung nama penghubung ini).
:valid input:valid Pilih semua elemen <input> yang memiliki nilai yang sah.
:visited a:visited Pilih semua pautan yang telah di lawati.