Tuesday, December 30, 2014

Tutorial CSS Part 21: Mengenal Pseudo Elemen

Pseudo elemen adalah elemen semu berupa keyword yang ditambahkan pada selector dengan tujuan untuk mengatur style dari sebagian elemen saja. Beberapa pseudo elemen hanya bisa dipakai pada elemen blok saja, seperti div dan p.

Kegunaan dari pseudo elemen diantaranya adalah untuk mengatur tampilan baris pertama sebuah paragraf atau sekedar menambahkan dekorasi image pada akhir paragraf.

Cara penulisan pseudo elemen

Untuk menuliskan pseudo elemen, kita menggunakan tanda dobel titik dua (::) diantara selector elemen dan pseudo elemen.

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

Berikut ini beberapa pseudo elemen dan penjelasannya :

1. ::after

Adalah pseudo elemen yang dipakai untuk menambahkan sesuatu pada akhir elemen.
p::after {
    content: url(splitter.gif);
}
Pada contoh diatas berarti kita menambahkan gambar splitter.gif pada akhir paragraf.

Kita bisa belajar pseudo elemen ::after disini >>.

2. ::before

Adalah pseudo elemen yang dipakai untuk menambahkan sesuatu pada awal elemen.
p::before {
    content: url(heading.gif);
}
Pada contoh diatas berarti kita menambahkan gambar heading.gif pada akhir paragraf.

Kita bisa belajar pseudo elemen ::before disini >>.

3. ::first-letter

Adalah pseudo elemen yang dipakai untuk mengatur style dari huruf pertama dari text sebuah elemen. Pseudo elemen ::first-letter hanya bisa dipakai pada blok elemen saja.
p::first-letter {
    color: #0000FF;
    font-size: 20px;
}
Pada contoh diatas berarti kita menampilkan huruf pertama dari text pada paragraf dengan warna biru dengan ukuran font 20px.

Kita bisa belajar pseudo elemen ::first-letter disini >>.

4. ::first-line

Adalah pseudo elemen yang dipakai untuk mengatur style dari baris pertama pada sebuah elemen. Pseudo elemen ::first-line hanya bisa dipakai pada blok elemen saja.
p::first-line {
    color: #00FF00;
    font-variant: small-caps;
}
Pada contoh diatas berarti kita menampilkan baris pertama pada paragraf dengan warna hijau dengan varian font small-caps.

Kita bisa belajar pseudo elemen ::first-line disini >>.

5. ::selection

Adalah pseudo elemen yang dipakai untuk mengatur style dari bagian elemen yang diselect oleh user. Properti yang bisa diterapkan pada pseudo elemen ::selection adalah color, background, cursor, dan outline.
::selection {
    color: #FF0000;
    background: yellow;
}
Pada contoh diatas berarti kita mengubah tampilan obyek yang diselect oleh pengguna dengan warna merah dengan background kuning.

Kita bisa belajar pseudo elemen ::selection disini >>.

Lihat indeks artikel Tutorial CSS Dasar >>

Referensi:

0 komentar

Post a Comment