Assalamuallaikum Wr Wb..

cs1.png

Selamat malam sahabat blogponsel, kali ini saya akan melanjutkan tahap tutorial css lagi yaitu Pengertian Dan Fungsi Psuedo Element Pada Css. Kenapa saya melanjutkan lagi tutorial css nya ? Karena menurutku tidak lengkap rasanya jika saya tidak membahas semuanya, walaupun kemarin-kemarin saya telah menjelaskan semua selector tapi itu hanya sebagian saja, masih banyak yang harus di pelajari dan di pratikkan sehingga kita benar-benar mengerti tentang css, semoga saja artikel yang akan saya share ini mudah di pahami oleh semua orang terutama bagi yang ingin belajar tentang css.

Mempelajari psuedo memang kelihatan rumit dan susah tapi juga tidak terlalu sulit untuk di pelajari, saya akan mencoba untuk membuat tutorial yang semudah mungkin agar kalian dapat dengan mudah untuk mempelajarinya, oke...

Pseudo elemet merupakan selector yang digunakan untuk mengakses suatu tag html yang tidak terlihat atau tag yang tidak bisa di akses menggunakan selector biasa, psuedo di bagi menjadi dua macam yaitu Psuedo Class Selector dan Psuedo Element Selector. Pseudo element di tulis dengan menggunakan symbol titik dua (colon) ":" tanpa tanda petik di depan nama selectornya, contoh .selector:visited. Namun ada pula yang menggunakan titik dua ":" dengan jumlah dua, contoh .selector::visited, akan tetapi tidak semua browser mampu untuk membaca pseudo dengan jumlah titik dua berjumlah 2 "::" contohnya browser IE (Internet Explore) terutama versi 8 ke bawah, browser ini hanya mampu membaca pseudo dengan titik dua ":" berjumlah satu, karena kebanyakan pseudo yang titik dua berjumlah 2 itu type CSS2 & CSS3.

Nah... Di bawah ini saya akan menjelaskan tentang Pseudo Class Selector terlebih dahulu.


1. Pseudo Class Selector

Pseudo class selector adalah selector yang digunakan untuk mengakses bagian tertentu dalam kode html yang tidak bisa di akses dengan selector biasa, konsep pseudo class selector adalah memperkenalkan suatu perintah untuk menyeleksi suatu informasi yang berada di dalam atau yang berada di luar dokumen yang tidak dapat di seleksi menggunakan cara yang sederhana.

Fungsi Pseudo Class Selector adalah di rancang untuk mengakses suatu kondisi tertentu di dalam file template atau di dalam kumpulan kode HTML yang ada, sebagai contoh yang pertama saya akan mencoba mengedit bagian post dengan background biru di keseluruhan list post di homepage. Simak contohnya di bawah ini !!

.post { margin:5px;padding:5px;background:#0000ff;overflow:hidden;border:1px solid #007; }

Dari kode di atas maka akan menghasilkan sebuah tampilan seperti ini, silahkan klik tautan berikut ini Home Page

Dari contoh tersebut telah di ketahui bahwa bagian post semua memiliki background berwarna biru, itu bisa terjadi karena telah di atur seperti kode yang telah saya tulis di atas tadi.

Lalu pada contoh kedua saya akan membuat background post menjadi belang-belang dengan warna biru dan merah, atau list post kesatu berwarna biru dan post kedua berwarna merah. Kodenya sebagai berikut ini.

.post:nth-child(odd) { margin:5px;padding:5px;background:#0000ff; } .post:nth-child(even) { margin:5px;padding:5px;background:#ff0000; }


Hasilnya :

Dari kode di atas jika di aplikasikan ke dalam css maka akan menghasilkan tampilan berikut ini, klik tautan ini untuk melihat hasil contohnya Homepage 1


Keterangan :

Kenapa background pada post tersebut bisa belang, itu bisa terjadi karena saya telah menambahkan selector baru pada selector .post yaitu :nth-child(odd) dan :nth-child(even). :nth-child(odd) berfungsi untuk mengatur list elemen ke 1,3,5,7,9 dan seterusnya sedangkan :nth-child(even) untuk mengatur list elemen ke 2,4,6,8,10 dan seterusnya. Intinya adalah (odd) berarti ganjil dan (even) berarti genap.

Pseudo Class Selector memiliki beberapa selector diantaranya : :hover, :visited, :nth-child(odd) dan (even), :nth-child(n), :active, :not(s), :focus, :first-child, :last-child, dan :only-child.. Untuk pengertian selector pseudo class selector akan saya jelaskan di next artikel..


Baca Juga = Cara Mudah Membuat Warna Font Di Postingan

Sekarang saya akan menjelaskan jenis pseudo yang kedua yaitu Pseudo Element Selector. Simak di bawah ini !!


2. Pseudo Element Selector

Pseudo Element Selector akan menyeleksi potongan tag HTML atau mengakses sebuah elemen yang sebelumnya tidak ada, pseudo elemen selector menciptakan sebuah abstraksi di luar yang ditentukan oleh bahasa dokumen. Misalnya, bahasa dokumen tidak menawarkan mekanisme untuk mengakses huruf pertama atau baris pertama dari konten elemen. Pseudo elemen memungkinkan penulis untuk merujuk pada informasi yang tidak dapat di akses ini. Pseudo elemen juga memberi cara kepada penulis untuk merujuk pada konten yang tidak ada dalam sumber dokumen. Contohnya saya akan membuat huruf awal di artikel menjadi huruf besar, begini caranya !!

Di sini saya akan menggunakan salah satu selector dari pseudo elemen yaitu :first-letter

.post .post-content:first-letter { font-size:15em;color:#ff0000; }

Maka kode tersebut akan menghasilkan tampilan seperti ini, silahkan klik tautan berikut ini untuk melihat hasilnya Homepage 3


Keterangan :

Seperti yang telah di lihat pada contoh di atas, bahwa huruf awal pada konten artikel berukuran tidak sama atau lebih besar daripada dengan lainnya, itu bisa terjadi berkat selector :first-letter yang saya tambahkan pada selector .post tadi. Selector :first-letter memungkinkan penulis untuk mengatur huruf awal agar berbeda dengan lainnya, hal ini tidak bisa di lakukan oleh selector biasa pada umumnya, harus menggunakan bantuan pseudo elemen selector untuk melakukannya.

Namun tidak hanya :first-letter saja yang dapat kita gunakan, tapi juga :first-line, :before, dan :after tentunya, masing-masing selector tersebut memiliki fungsi yang berbeda-beda, untuk lebih lanjutnya akan saya jelaskan di lain kesempatan.

Dengan bantuan Pseudo Class Selector dan Pseudo Element Selector bisa membuat tampilan css kita yang awal mulanya hanya biasa-biasa saja tanpa efek tapi dengan bantuan kedua type pseudo ini bisa membuat tampilan css yang di buat menjadi lebih berwarna dan bervariasi, sehingga tidak itu-itu saja desain yang kita berikan.

Saya rasa pengertian pseudo element pada css cukup sampai di sini dulu, jika ada yang kurang akan saya jelaskan di lain kesempatan dan insya allah lebih spesifik lagi dari yang sebelumnya.. Terima kasih !!

Demikian yang dapat saya sampaikan tentang Pengertian Dan Fungsi Psuedo Element Pada Css semoga apa yang saya share ini bisa membantu anda dalam belajar di bidang css, jika ada pertanyaan silahkan bertanya pada kolom komentar artikel ini. Terima kasih sudah betkunjung..

Wassalameallaikum Wr Wb..