Latest web development tutorials

CSS pseudo-elemen

CSS pseudo-element digunakan untuk menambahkan beberapa efek pemilih khusus.

tatabahasa

sintaks Pseudo-elemen:

selector:pseudo-element {property:value;}

Kelas CSS juga dapat menggunakan pseudo-elemen:

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

: Pertama-line pseudo-elemen

"Pertama-line" pseudo-elemen yang digunakan untuk mengatur gaya khusus untuk baris pertama dari teks.

Pada contoh berikut, browser akan didasarkan pada "lini pertama" pseudo-elemen dalam gaya baris pertama dari format teks elemen p:

contoh

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

Coba »

Catatan: "pertama-line" pseudo-elemen hanya dapat digunakan untuk elemen blok-tingkat.

CATATAN: sifat berikut dapat diterapkan pada "lini pertama" pseudo-elemen:

  • properti font
  • sifat warna
  • latar belakang properti
  • kata-spacing
  • letter-spacing
  • text-decoration
  • vertical-align
  • text-transform
  • line-height
  • jelas

: Pertama-surat pseudo-elemen

"Pertama-huruf" pseudo-elemen yang digunakan untuk mengatur gaya khusus dengan huruf pertama dari teks:

contoh

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

Coba »

Catatan: "pertama huruf" pseudo-elemen hanya dapat digunakan untuk elemen blok-tingkat.

CATATAN: sifat berikut dapat diterapkan pada "pertama huruf" pseudo-elemen:

  • properti font
  • sifat warna
  • latar belakang properti
  • sifat marjin
  • padding
  • sifat perbatasan
  • text-decoration
  • vertical-align (hanya jika "mengambang" adalah "tidak ada")
  • text-transform
  • line-height
  • mengapung
  • jelas

Pseudo-elemen dan kelas CSS

Pseudo-elemen dapat dikombinasikan dengan kelas CSS:

p.article:first-letter {color:#ff0000;}

<p class="article">A paragraph in an article</p>

Contoh di atas akan membuat semua kelas sebagai huruf pertama dari artikel ayat berubah merah.

Beberapa Pseudo-elemen

Sebuah pluralitas pseudo-elemen dapat dikombinasikan untuk menggunakan.

Pada contoh berikut, paragraf pertama dari surat itu akan ditampilkan dalam warna merah, ukuran font adalah xx-besar. Baris pertama dari sisa teks akan berwarna biru, dan kecil huruf.

Paragraf yang tersisa dari teks dalam ukuran font default dan warna untuk tampilan:

contoh

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

Coba »

CSS -: sebelum pseudo-elemen

": Sebelum" pseudo-elemen dapat memasukkan konten baru di depan isi dari elemen.

Contoh berikut untuk menyisipkan gambar di depan setiap <h1> elemen:

contoh

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

Coba »

CSS -: setelah pseudo-element

": Setelah" pseudo-elemen dapat memasukkan konten baru setelah isi dari elemen.

Contoh-contoh berikut menyisipkan gambar setelah setiap <h1> elemen:

contoh

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

Coba »

Semua CSS pseudo-kelas / elemen

Pemilih contoh misalnya acara
: link a:link Pilih semua link yang belum dikunjungi
: mengunjungi a:visited Pilih semua link yang dikunjungi
: aktif a:active Pilih adalah link aktif
: hover a:hover Menempatkan mouse pada status link
: fokus input:focus Setelah memilih elemen input memiliki fokus
: Pertama-surat p:first-letter Pilih huruf pertama dari setiap <p> elemen
: Lini pertama p:first-line Pilih baris pertama dari setiap <p> elemen
: Pertama-anak p:first-child <] P> pemilih elemen cocok dengan elemen yang tergabung dalam elemen anak pertama
: sebelum p:before Sisipkan konten sebelum setiap <p> elemen
: setelah p:after Sisipkan konten setelah setiap <p> elemen
: Lang (bahasa) p:lang(it) lang pilihan atribut <p> elemen ke nilai awal