Assalamu’alaikum Warahmatullahi Wabarakaatuh,
Halo Sobat Mas Rizky, berjumpa lagi ya di Website yang sama, dalam kesempatan kali ini admin Masrizky.web.id akan berbagi Mengenal Pseudo Class dan Pseudo Elemen.
Dalam dunia pengembangan web, pseudo class dan pseudo elemen adalah konsep yang sangat penting dalam CSS (Cascading Style Sheets) untuk memberikan gaya khusus pada elemen HTML tanpa perlu menambahkan kelas atau ID pada elemen tersebut.
Kedua konsep ini membantu desainer web untuk menciptakan tampilan yang lebih dinamis dan interaktif dengan lebih sedikit kode.
Pseudo class digunakan untuk mendefinisikan keadaan khusus dari elemen tertentu. Misalnya, `:hover` adalah pseudo class yang digunakan untuk mengubah gaya elemen saat pengguna mengarahkan kursor mouse ke elemen tersebut.
Mengenal Pseudo Class dan Pseudo Elemen
Ada banyak pseudo class lain seperti `:focus` (saat elemen mendapatkan fokus), `:nth-child(n)` (untuk menargetkan elemen anak pada posisi tertentu), dan `:visited` (untuk link yang sudah dikunjungi). Dengan menggunakan pseudo class, desainer dapat secara efisien mengubah tampilan dan interaktivitas elemen web tanpa perlu manipulasi DOM langsung.
Di sisi lain, pseudo elemen digunakan untuk menambahkan elemen khusus yang tidak ada dalam dokumen HTML. Contoh yang paling umum adalah `::before` dan `::after`, yang memungkinkan desainer untuk menyisipkan konten sebelum atau setelah konten elemen yang ada.
Pseudo elemen ini sangat berguna untuk menambahkan ikon, dekorasi, atau teks tambahan tanpa mengubah struktur HTML.
Contoh lainnya termasuk `::first-line` dan `::first-letter`, yang memungkinkan Anda untuk menargetkan dan memberikan gaya khusus pada baris atau huruf pertama dari elemen teks.
Secara keseluruhan, pemahaman dan penggunaan pseudo class dan pseudo elemen adalah keterampilan penting bagi setiap pengembang web.
Mereka memungkinkan kontrol yang lebih besar atas tampilan dan interaktivitas halaman web, yang pada akhirnya menciptakan pengalaman pengguna yang lebih kaya dan menarik.
Dengan terus berkembangnya CSS, kemungkinan-kemungkinan baru dengan pseudo class dan pseudo elemen terus bermunculan, membuka jalan bagi inovasi dalam desain web.
Mengenal Pseudo Class dan Pseudo Elemen
Mungkin anda sudah sering mendengan istilah pseudo ini. Arti secara bahasa pseudo adalah tidak real atau bisa disilang rekayasa, bukan sebenarnya, dan sejenisnya. (silahkan cari sendiri xixi…) Untuk lebih jelasnya silahkan simak pada Pseudo class dan Pseudo Elemen sebagai berikut ini ya.
Pseudo Class
Pseudo Class digunakan untuk memberikan efek terhadap selektor tertentu. Sebagai contohnya, satu tautan ayau disebut (link) bisa berubah-ubah warna, biru sebelum dikunjungi, ungu ketika disentuh mouse, merah ketika aktif, dan hijau setelah dikunjungi.
Hal ini sebenarnya sudah sering digunakan sebetulnya oleh para blogger indonesia, diantara pseudo class :
Penggunaan :link, :hover, :active dan:visited
:link – yaitu tautan sebelum dikunjungi.
:hover – yaitu ketika mouse disimpan di atasnya.
:active – yaitu link yang sedang aktif (misalnya menu yang sedang diklik akan diberi warna berbeda dengan warna sebelumnya.
:visited – yaitu link yang sudah dikunjungi (ini untuk mempermudah pengguna, dalam membedakan mana link yang sudah dikunjungi dan belum)
Sebagai contoh perhatikan pada blok menu dibawah ini, pertama lihat warna, kedua simpan mouse diatas warna biru, ketiga klik dan tahan.
HomeContactContoh Link
Blok di atas berwarna biru, ketika mouse disimpan di atasnya akan berubah menjadi ungu, itulah pseudeo class :hover. Kemudian ketika diklik dan ditahan, akan berwarna merah, itulah pseudeo class :active. Tulisan Contoh link berwarna hijau, karena link mengarah ke postingan ini dan kamu sudah mengunjunginya, itulah pseudeo class :visited.
Untuk standar pseduo class adalah seperti ini dibawah ini :
a:link {
/* deklarasi */
}
a:visited {
/* deklarasi */
}
a:hover {
/* deklarasi */
}
a:active {
/* deklarasi */
}
a:focus {
/* deklarasi */
}Penggunaan :focus
:focus – :focus ini tidak hanya terbatas pada link saja ya, akan tetapi sering digunakan pada kolom isian (textarea). Sebagai contoh lihat kolom isian di bawah ini, klik pada kolom (boleh diisi hehehe….)
| Nama | : | |
| Alamat | : | |
:disabled – yaitu untuk menonaktifkan kolom isian, untuk pengguna blogspot hal ini tidak terlalu penting karena jarang digunakan.
Untuk contoh :disabled lihat isian alamat diblok dengan warna orange.
| Nama | : | |
| Alamat | : | |
Contoh CSS
input.data:disabled {
background: #e57609;
border: 1px solid #999;
color: #fff;
}Untuk kode HTML-nya kurang lebih seperti ini :
<input class="fake-area" type="text" disabled="disabled" value="Mohon maaf, untuk sementara kolom dinonaktifkan!"/>
:enable – untuk membalik dari keadaan :disabled, sebenernya tanpa enable pun bisa, hapus saja kode disabled="disabled"
:target – target biasanya dibarengi dengan hash tag (#) pseudeo class :target ini mengarahkan kepada elemen tertentu. Contoh saya membuat CSS target seperti ini:
#coba-target:target{
background:#ddd;
border:2px solid #333;
padding:70px 50px;
width:50%;
}Untuk mencoba perhatikan kolom isian yang disabled kemudian KLIK DISINI, Untuk me-refresh klik DISINI.
:lang() – biasanya digunakan untuk membedakan dalam bahasa, seperti Bahasa Indonesia dan Inggris.
Pseudo Element
:first-child – untuk merubah elemen pertama pada elemen induk
:last-child – untuk merubah elemen terakhir pada elemen induk
Sebagai contoh, saya punya kerangka seperti ini :
<ul>
<li>ini adalah first-child dari elemen utama</li>
<li>ini elemen ke-2 dari elemen utama</li>
<li>ini elemen ke-3 dari elemen utama</li>
<li>ini adalah last-child dari elemen utama</li>
</ul>Saya tambahkan CSS pada elemen di atas
ul li:first-child {color:blue;}
ul li:last-child {color:red;}Maka hasilnya seperti ini :
- ini adalah first-child dari elemen utama
- ini elemen ke-2 dari elemen utama
- ini elemen ke-3 dari elemen utama
- ini adalah last-child dari elemen utama
Untuk lebih memahaminya, pada blog saya, :first-child dan :last-child digunakan pada Widget Komentar Sahabat dan Sering Dikunjungi. Pada tag <li> saya gunakan border-bottom: 1px solid #ccc; dan border-top: 1px solid #fff;.
Apabila pada first-child dan last-child tidak dihilangkan border-nya, maka pada kotak utama, kotak atas akan berwarna putih dan kotak bawah berwarna abu-abu agak tua.
:first-line – untuk merubah elemen pada baris pertama sebuah paragraf atau elemen induk.
:first-letter – untuk menyeleksi huruf pertama pada sebuah paragraf atau elemen induk.
Sebagai contoh saya mempunyai kerangka seperti ini :
<div id="paragraf">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
</div>kemudian saya tambahkan CSS
#paragraf:first-line {color:red;}maka akan menghasilkan tampilan seperti ini
Kemudian saya tambahkan CSS :first-letter
#paragraf:first-letter {color:blue;font-size:160%;font-weight:bold;font-family:Georgia}maka akan menghasilkan tampilan seperti ini (seperti fungsi Drop-cap)
:before dan :after
:before digunakan untuk memberi tambahan sebelum elemen utama. Sedangkan :after digunakan untuk memberi tambahan sesudah elemen utama. Tambahan bisa berupa teks, objek, atau gambar.
Sebagai contoh saya membuat CSS seperti ini
#kotak-contoh{
background:#4aa4ba;
border-radius:5px;
width:auto;
height:90px;
position:relative;
}maka hasilnya hanya sebuah kotak berwarna biru.
Kemudian saya tambahkan segi tiga diatasnya dengan CSS seperti ini
#kotak-contoh:before{
content:"";
width:0;
height:0;
position:absolute;
bottom:100%;
right:15px;
border:8px solid transparent;
border-color:transparent transparent #4aa4ba;
}maka hasilnya akan terlihat seperti di bawah ini…
Sebetulnya masih banyak pseudo class dan pseudo element yang tidak saya tuliskan di sini. Selamat mencari dan berkreasi…
