CSS pseudo-elemen yang digunakan untuk menambahkan efek khusus untuk beberapa penyeleksi.

Syntax.

Syntax dari pseudo-elemen:

selector:pseudo-element {property:value;}

Kelas CSS juga dapat digunakan dengan pseudo-elemen:

selector.class: pseudo-elemen {properti: nilai;}

lini pertama Pseudo-elemen.

“Pertama-line” pseudo-elemen yang digunakan untuk menambah gaya khusus untuk baris pertama dari teks.

Pada contoh berikut browser format baris pertama dari teks dalam elemen ap sesuai dengan gaya dalam “lini pertama” pseudo-elemen (di mana browser istirahat garis, tergantung pada ukuran jendela browser):

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

Catatan:  “lini pertama” pseudo-elemen hanya dapat digunakan dengan blok-tingkat elemen.

Catatan:  Sifat-sifat berikut berlaku untuk “lini pertama” pseudo-elemen:

-Font properti.
-warna properti.
-latar belakang sifat.
-kata-spasi.
-surat-spasi.
-text-decoration.
-vertical-align.
-teks-transform.
-line-height.
-jelas.

Pertama-surat Pseudo-elemen.

“Pertama-huruf” pseudo-elemen yang digunakan untuk menambah gaya khusus untuk huruf pertama dari teks:

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

Catatan: “pertama-huruf” pseudo-elemen hanya dapat digunakan dengan blok-tingkat elemen.

Catatan: Sifat-sifat berikut berlaku untuk “huruf pertama-” pseudo-elemen:

Font properti.
warna properti.
latar belakang sifat.
marjin properti.
Padding properti.
perbatasan properti.
text-decoration.
vertical-align (hanya jika “mengambang” adalah “none”).
teks-transform.
line-height.
mengapung.
jelas.

Pseudo-elemen dan Kelas CSS.

Pseudo-elemen dapat dikombinasikan dengan CSS kelas:

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

<p>A paragraph in an article</p>

Contoh diatas akan menampilkan huruf pertama dari semua paragraf dengan class = “artikel”, dalam warna merah.

 

Beberapa Pseudo-elemen.

Beberapa pseudo-elemen juga dapat dikombinasikan.

Pada contoh berikut, huruf pertama dari paragraf akan merah, dalam ukuran font xx-besar. Sisa dari baris pertama akan biru, dan dalam small-caps. Sisa paragraf akan menjadi default font ukuran dan warna:

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

 

CSS-sebelum Pseudo-elemen.

“sebelum” pseudo-elemen dapat digunakan untuk memasukkan beberapa konten sebelum konten dari suatu elemen.

Contoh berikut ini menyisipkan sebuah gambar sebelum setiap elemen <h1>:

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

 

CSS – The: setelah Pseudo-elemen.

Para “: setelah” pseudo-elemen dapat digunakan untuk memasukkan beberapa konten setelah isi dari suatu elemen.

Contoh berikut menyisipkan gambar setelah setiap elemen <h1>:

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

Semua CSS Kelas Pseudo Elemen.

Selector	Example	Example description
:link	a:link	Memilih semua link belum dikunjungi.
:visited	a:visited	Memilih semua link yang dikunjungi.
:active	a:active	Memilih link aktif.
:hover	a:hover	Memilih link pada mouse.
:focus	input:focus	Memilih elemen input yang memiliki fokus.
:first-letter	p:first-letter	Memilih huruf pertama dari setiap elemen <p>.
:first-line	p:first-line	Memilih baris pertama dari setiap elemen <p>.
:first-child	p:first-child	Memilih elemen <p> setiap yang merupakan anak pertama dari induknya.
:before	p:before	Sisipkan konten sebelum setiap elemen <p>.
:after	p:after	Sisipkan konten setelah setiap elemen <p>.
:lang(language)	p:lang(it)	Memilih setiap elemen <p> dengan nilai atribut lang dimulai dengan “itu”.