Halo Sahabat Kang Rizky , berjumpa lagi ya di Blog yang sama ya, dalam kesempatan kali ini mimin akan berbagi Tips dan tutorials Mengenal Pa...
Mengenal Pada CSS Pseudo Class dan Pseudo Elemen
January 13, 2024
Daftar Isi [Tampil]
Halo Sahabat Kang Rizky, berjumpa lagi ya di Blog yang sama ya, dalam kesempatan kali ini mimin akan berbagi Tips dan tutorials Mengenal Pada CSS Pseudo Class dan Pseudo Elemen.
Pseudo Class
Pseudo Class adalah digunakan untuk memberikan efek terhadap pada selektor tertentu saja. Sebagai contohnya, satu tautan URL bisa berubah-ubah warnanya misalkan, biru sebelum dikunjungi warnanya dibuat, ungu ketika disentuh mouse berubah lagi menjadi warna, merah ketika aktif, dan warna akan menajdi hijau setelah dikunjungi oleh pembaca.
Hal ini sebenarnya sudah sering digunakan oleh para blogger indonesia, diantara CSS pseudo class :
Pengguna'an :link, :hover, :active dan:visited
:link - yaitu tautan sebelum dikunjungi oleh pembaca.
:hover - adalah ketika mouse disimpan di atasnya.
:active - link yang sedang aktif (misalkan pada menu yang sedang diclik akan diberi warna yang berbeda dengan warna sebelumnya.
:visited - yaitu link yang sudah dikunjungi oleh visitor (hal ini untuk mempermudah pengguna, dalam membedakan mana link URL yang sudah dikunjungi dan belum dikunjungi)
Sebagai contohnya sahabat coba perhatikan blok menu dibawah ini, pertama lihat warna, kedua simpan mouse diatas warna biru, ketiga klik dan tahan.
HomeContact Contoh LinkPada blok di atas berwarna biru ini, ketika mouse disimpan di atasnya akan berubah menjadi warna ungu, itulah pseudeo class :hover. Selanjutnya ketika diclik dan ditahan, akan menjadi berwarna merah, itulah pseudeo class :active. Tulisan Contoh link berwarna hijau, karena link tersebut mengarah ke postingan ini dan sahabat sudah mengunjunginya, itulah pseudeo class :visited.
Untuk standar CSS pseduo class adalah seperti dibawah ini :
a:link {
/* contoh mas rizky */
}
a:visited {
/* contoh mas rizky */
}
a:hover {
/* contoh mas rizky */
}
a:active {
/* contoh mas rizky */
}
a:focus {
/* contoh mas rizky */
}Penggunaan :focus
:focus - :focus ini juga tidak hanya terbatas pada link saja ya, akan tetapi sering juga digunakan pada Colom isian (textarea). Sebagai contohnya sahabat buisa lihat colom isian di bawah ini ya, dan coba sahabat klik pada kolom (boleh diisi juga kok bro hehehe....)
| Nama | : | |
| Alamat | : | |
:disabled - adalah untuk menonaktifkan pada colom isian, untuk itu pengguna platfrom blogspot hal ini tidak terlalu penting ya karena jarang digunakan juga kan.
Untuk contoh selanjutnya
:disabled lihat pada isian alamat yang diblok dengan warna orange.| Nama | : | |
| Alamat | : | |
Contoh CSS
input.data:disabled {
background: #e57609;
border: 1px solid #999;
color: #fff;
}<input class="fake-area" type="text" disabled="disabled" value="Mohon maaf, kalo kang rizky orangnya manis!"/>:enable - untuk membalik dari keadaannya
:disabled, sebenernya tanpa enable pun juga bisa ya, hapus saja codenya disabled="disabled":target - target biasanya juga dibarengi dengan hash tag (#) pseudeo class
:target ini adalah mengarahkan kepada sebuah elemen tertentu. Contoh admin akan membuat CSS target seperti dibwah ini:#coba-target:target{
background:#ddd;
border:2px solid #333;
padding:70px 50px;
width:50%;
}:lang() - biasanya ini digunakan untuk membedakan dalam sebauh bahasa saja, seperti Bahasa Indonesia dan Jawa Kuno.
Pseudo Element
:first-child - ini untuk merubah sebuah elemen pertama pada elemen induk:last-child - ini untuk merubah sebuah elemen terakhir pada elemen induk
Sebagai contohnya, admin mempunyai kerangka kerangka seperti dibawah ini :
<ul>
<li>ini adalah first-child dari elemen utamanya</li>
<li>ini elemen ke-2 dari elemen utamanya</li>
<li>ini elemen ke-3 dari elemen utamanya</li>
<li>ini adalah last-child dari elemen utamanya</li>
</ul>ul li:first-child {color:blue;}
ul li:last-child {color:red;}Maka hasilnya seperti dibawah ini ya :
- ini merupakan first-child dari elemen utamanya
- ini elemen ke-2 dari elemen utamanya
- ini elemen ke-3 dari elemen utamanya
- ini adalah last-child dari elemen utamanya
:first-child dan :last-child digunakan pada Widget Komentar sobat kang rizky dan Sering Dikunjungi. Pada tag <li> admin akan gunakan border-bottom: 1px solid #ccc; dan border-top: 1px solid #fff;.Apabila pada element first-child dan last-child tidak dihilangkan bordernya, maka pada kotak utamanya, kotak atas akan berubah wana menjadi warna putih dan kotak bawahnya menjadi berwarna abu-abu tua.
:first-line - untuk merubah pada elemen ini sahabat dari baris pertama sebuah paragraf atau elemen induknya.
:first-letter - untuk menyeleksi hurufnya pertama pada sebuah paragraf atau elemen induknya ya.
Sebagai contoh saja admin mempunyai kerangka seperti dibawah ini ini :
<div id="paragraf">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In aliquet congue orci quis blandit. In sed rhoncus est. Suspendisse vitae enim at mauris vestibulum feugiat. Fusce luctus fringilla faucibus. Sed tempus ligula dolor, et aliquam elit facilisis ut. Donec ultrices maximus tortor ut imperdiet. Phasellus aliquam, sapien id fermentum auctor, lectus est vestibulum sapien, a consequat neque velit at erat. Nam mi justo, pharetra ac lorem sed, euismod venenatis turpis. Donec pellentesque dui non neque fermentum egestas. Praesent tincidunt risus sit amet quam ultrices viverra. Aliquam dictum dapibus ullamcorper.
</div>#paragraf:first-line {color:red;}Lorem ipsum dolor sit amet, consectetur adipiscing elit. In aliquet congue orci quis blandit. In sed rhoncus est. Suspendisse vitae enim at mauris vestibulum feugiat. Fusce luctus fringilla faucibus. Sed tempus ligula dolor, et aliquam elit facilisis ut. Donec ultrices maximus tortor ut imperdiet. Phasellus aliquam, sapien id fermentum auctor, lectus est vestibulum sapien, a consequat neque velit at erat. Nam mi justo, pharetra ac lorem sed, euismod venenatis turpis. Donec pellentesque dui non neque fermentum egestas. Praesent tincidunt risus sit amet quam ultrices viverra. Aliquam dictum dapibus ullamcorper.
Kemudian admin juga tambahkan CSS
:first-letter#paragraf:first-letter {color:blue;font-size:160%;font-weight:bold;font-family:Georgia}maka akan menghasilkan tampilan seperti dibawah ini (seperti fungsi Dropcap)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In aliquet congue orci quis blandit. In sed rhoncus est. Suspendisse vitae enim at mauris vestibulum feugiat. Fusce luctus fringilla faucibus. Sed tempus ligula dolor, et aliquam elit facilisis ut. Donec ultrices maximus tortor ut imperdiet. Phasellus aliquam, sapien id fermentum auctor, lectus est vestibulum sapien, a consequat neque velit at erat. Nam mi justo, pharetra ac lorem sed, euismod venenatis turpis. Donec pellentesque dui non neque fermentum egestas. Praesent tincidunt risus sit amet quam ultrices viverra. Aliquam dictum dapibus ullamcorper.
:before dan :after
:before digunakan untuk memberi tambahan saja sebelum elemen utamanya. Sedangkan :after digunakan untuk memberi tambahan sesudah elemen utamanya. Tambahan bisa berupa teks, objek, atau juga gambar ya.Sebagai contoh saja admin membuat CSS seperti dibawah ini
#kotak-contoh{
background:#4aa4ba;
border-radius:5px;
width:auto;
height:90px;
position:relative;
}Selanjutnya admin tambahkan segi tiga diatasnya dengan CSS seperti dibawah ini
#kotak-contoh:before{
content:"";
width:0;
height:0;
position:absolute;
bottom:100%;
right:15px;
border:8px solid transparent;
border-color:transparent transparent #4aa4ba;
}
Sebetulnya masih banyak pseudo class dan pseudo element yang tidak admin tuliskan di sini ya itu saja admin rasa sudah cukup. Selamat mencoba dan mencari sahabat...
Demikian Tips Dan tutorials Mengenal Pada CSS Pseudo Class dan Pseudo Elemen yang dapat kami sampaikan semoga beranfaat. Jika informasi ini bermanfaat, Jangan lupa Share ya teman-teman, Terima Kasih
Bantu Apresiasi Bantu berikan apresiasi jika artikelnya dirasa bermanfaat agar penulis lebih semangat lagi membuat artikel bermanfaat lainnya. Terima kasih.
