Selektor CSS dengan menggunakan pseudo elemen merupakan selektor yang berguna untuk memberikan gaya pada bagian tertentu pada suatu elemen HTML. Selektor berbentuk pseudo elemen berbeda dengan selektor CSS normal lainnya yang akan menerapkan gaya bagi seluruh bagian elemen HTML yang akan diberikan gaya. Namun selektor CSS berbentuk pseudo elemen hanya akan menerapkan gaya hanya untuk bagian-bagian kecil tertentu saja pada elemen HTML.
Bagian tertentu yang dapat diberikan gaya melalui pseudo elemen misalnya seperti memberi gaya pada huruf pertama saja suatu elemen paragraf, baris pertama saja suatu paragraf, menyisipkan konten tertentu (gambar/icon) sebelum atau sesudah elemen HTML dan lainnya.
CSS
1
Previous PageSelector::pseudo-elemen {property : value}
Pseudo elemen ::first-line digunakan untuk menambahkan gaya dan efek tertentu pada baris pertama saja suatu elemen HTML.
HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html>
<head>
<style>
h1{color:blue;}
p::first-line{
color:red;
text-decoration:underline;
}
p.ungu::first-line{
color:purple;
text-decoration:none;
}
</style>
<title>Belajar Style Sheet Pada CSS</title>
</head>
<body>
<h1>Belajar Style Sheet Pada CSS</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel ante at sem hendrerit consectetur. Nullam tempus orci sed est dictum semper. Praesent lacinia nec massa quis gravida. Aliquam ultrices neque non nunc auctor, et elementum libero porttitor. Nunc eu lacinia ex. Nam molestie vehicula sapien, vitae condimentum turpis maximus nec. Fusce eu accumsan metus. Aliquam blandit varius interdum.</p>
<p class="ungu">Aliquam euismod ut dolor laoreet feugiat. Aliquam mattis, lectus eget tristique tincidunt, erat ex posuere nulla, a laoreet purus dolor at metus. Ut elementum dictum mi, non gravida est condimentum iaculis. Suspendisse magna mi, dapibus sit amet bibendum vel, dapibus laoreet tortor. Nam lobortis sapien ultricies, suscipit risus non, blandit purus. In hac habitasse platea dictumst. Praesent eu pretium nibh. Maecenas nec elementum libero. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</body>
</html>
Pseudo elemen ::first-letter digunakan untuk menambahkan gaya dan efek tertentu pada huruf pertama saja suatu elemen HTML.
HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!DOCTYPE html>
<html>
<head>
<style>
h1{color:blue;}
p::first-letter{
color:red;
text-decoration:underline;
font-size:44px;
font-weight:bold;
}
p.ungu::first-letter{
color:purple;
text-decoration:none;
font-size:44px;
font-weight:bold;
}
</style>
<title>Belajar Style Sheet Pada CSS</title>
</head>
<body>
<h1>Belajar Style Sheet Pada CSS</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel ante at sem hendrerit consectetur. Nullam tempus orci sed est dictum semper. Praesent lacinia nec massa quis gravida. Aliquam ultrices neque non nunc auctor, et elementum libero porttitor. Nunc eu lacinia ex. Nam molestie vehicula sapien, vitae condimentum turpis maximus nec. Fusce eu accumsan metus. Aliquam blandit varius interdum.</p>
<p class="ungu">Aliquam euismod ut dolor laoreet feugiat. Aliquam mattis, lectus eget tristique tincidunt, erat ex posuere nulla, a laoreet purus dolor at metus. Ut elementum dictum mi, non gravida est condimentum iaculis. Suspendisse magna mi, dapibus sit amet bibendum vel, dapibus laoreet tortor. Nam lobortis sapien ultricies, suscipit risus non, blandit purus. In hac habitasse platea dictumst. Praesent eu pretium nibh. Maecenas nec elementum libero. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</body>
</html>
Pseudo elemen ::before digunakan untuk menyisipkan konten tambahan dan diletakkan sebelum elemen yang disebutkan.
HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>
<html>
<head>
<style>
h1{color:blue;}
p::before{
content: url(add-icon.gif);
margin:5px;
}
p.centang::before{
content: url(check.png);
margin:5px;
}
</style>
<title>Belajar Style Sheet Pada CSS</title>
</head>
<body>
<h1>Belajar Style Sheet Pada CSS</h1>
<p>Baris ini akan disisipi sebuah tanda plus pada awal paragraf.</p>
<p>Baris ini akan disisipi sebuah tanda plus pada awal paragraf.</p>
<p>Baris ini akan disisipi sebuah tanda plus pada awal paragraf.</p>
<p class="centang">Baris ini akan disisipi sebuah tanda centang pada awal paragraf.</p>
<p class="centang">Baris ini akan disisipi sebuah tanda centang pada awal paragraf.</p>
<p class="centang">Baris ini akan disisipi sebuah tanda centang pada awal paragraf.</p>
</body>
</html>
Pseudo elemen ::after digunakan untuk menyisipkan konten tambahan dan diletakkan sesudah elemen yang disebutkan.
HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>
<html>
<head>
<style>
h1{color:blue;}
p::after{
content: url(addicon.gif);
margin:5px;
}
p.centang::after{
content: url(check.png);
margin:5px;
}
</style>
<title>Belajar Style Sheet Pada CSS</title>
</head>
<body>
<h1>Belajar Style Sheet Pada CSS</h1>
<p>Baris ini akan disisipi sebuah tanda plus pada awal paragraf.</p>
<p>Baris ini akan disisipi sebuah tanda plus pada awal paragraf.</p>
<p>Baris ini akan disisipi sebuah tanda plus pada awal paragraf.</p>
<p class="centang">Baris ini akan disisipi sebuah tanda centang pada awal paragraf.</p>
<p class="centang">Baris ini akan disisipi sebuah tanda centang pada awal paragraf.</p>
<p class="centang">Baris ini akan disisipi sebuah tanda centang pada awal paragraf.</p>
</body>
</html>
Pseudo elemen ::marker digunakan untuk memberikan gaya pada marker atau penanda yang terdapat pada tag elemen <li> atau list item.
HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!DOCTYPE html>
<html>
<head>
<style>
h1{color:blue;}
::marker{
color:red;
font-size:22px;
}
ol li::marker{
color:navy;
font-size:22px;
}
</style>
<title>Belajar Style Sheet Pada CSS</title>
</head>
<body>
<h1>Belajar Style Sheet Pada CSS</h1>
<p>Nama kota di Indonesia :</p>
<ul>
<li>Jakarta</li>
<li>Batam</li>
<li>Surabaya</li>
<li>Medan</li>
<li>Semarang</li>
</ul>
<p>Nama Provinsi di Indonesia :</p>
<ol>
<li>Sumatera Utara</li>
<li>Kepulauan Riau</li>
<li>DKI Jakarta</li>
<li>Jawa Barat</li>
<li>Jawa Tengah</li>
<li>Kalimantan Timur</li>
</ol>
</body>
</html>
Pseudo elemen ::selection digunakan untuk memberikan gaya pada bagian teks tertentu suatu elemen yang diseleksi atau disorot oleh pengguna.
HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html>
<head>
<style>
h1{color:blue;}
p::selection{
color:yellow;
background:gray;
}
</style>
<title>Belajar Style Sheet Pada CSS</title>
</head>
<body>
<h1>Belajar Style Sheet Pada CSS</h1>
<p>Silahkan sorot pada paragraf ini untuk melihat perubahan tampilan yang sebenarnya dari pseudo ::selection.</p>
</body>
</html>
Hasil Script :
Silahkan sorot pada paragraf ini untuk melihat perubahan tampilan yang sebenarnya dari pseudo ::selection.
Catatan : Penggunaan notasi double colon "::" dan single colon ":" pada penanda selektor pseudo elemen menghasilkan efek yang sama dan tidak ada bedanya saat halaman dieksekusi. Notasi double colon "::" digunakan untuk selektor pseudo elemen sedangkan single colon ":" digunakan untuk selektor pseudo class.
Tutorial CSS
Paling Banyak Dibaca
News Letters
Silahkan masukkan email Anda untuk berlangganan informasi kami
