Menyediakan informasi seputar perkembangan mesin Blogger dan internet secara umum.

Perkenalan CSS Pseudo-Classes

tutorial css pseudo-class

Agak sulit untuk menjelaskan CSS Pseudo-Classes. Sebenarnya bisa dijelaskan, namun Saya rasa itu sangat membuang-buang waktu. Untuk menghemat waktu, di sini Saya sudah menyediakan dua buah area yang Saya buat dari elemen <input> berwarna hijau.
Ada dua hal yang harus kamu lakukan dalam area hijau pertama, yaitu meletakkan pointer di atas area, dan mengeklik area tersebut. Sedangkan untuk area hijau yang ke dua cukup dengan mengekliknya.


Demonstrasi CSS Pseudo-Classes

Area Hijau Pertama: Letakkan Pointer, Lalu Klik!

Area di bawah ini digunakan untuk mendemonstrasikan efek :hover dan :active pada elemen <input>

  • Kondisi normal digambarkan sebagai warna hijau
  • Saat kamu melihat warna kuning, itu artinya :hover
  • Saat kamu melihat warna merah, itu artinya :active

Area Hijau ke Dua: Klik!

Area di bawah ini digunakan untuk mendemonstrasikan efek :focus pada elemen <input>

  • Kondisi normal digambarkan sebagai warna hijau
  • Saat kamu melihat warna ungu, itu artinya :focus
  • :hover adalah selektor CSS untuk menyatakan keadaan ketika pointer berada di atas elemen.
  • :active adalah selektor CSS untuk menyatakan keadaan ketika pointer mengeklik elemen.
  • :focus juga digunakan untuk menyatakan keadaan ketika pointer mengeklik elemen seperti halnya :active, namun :focus memiliki kemampuan untuk mempertahankan keadaannya meskipun kita sudah menghentikan aksi klik, sedangkan :active hanya akan mengubah keadaan elemen saat kita mengklik elemen tersebut, namun efeknya akan menghilang sesaat setelah kita menghantikan aksi klik. Efek :focus akan menghilang saat kita mengeklik sesuatu di luar area tersebut. :focus hanya berlaku untuk elemen-elemen formulir dan tautan.

:link dan :visited adalah selektor khusus untuk elemen tautan:

CSS Pseudo Classes
Contoh nyata CSS Pseudo-Classes pada situs Google
  • :link digunakan untuk mengatur tampilan tautan yang aktif (yang memiliki atribut href)
  • :visited digunakan untuk mengatur tampilan tautan yang sudah pernah dikunjungi. :visited sangat bermanfaat untuk memberitahukan kepada pengunjung bahwa tautan yang ia lihat sudah pernah dikunjungi, sehingga pengunjung tidak akan tersesat.

Urutan standar pseudo-class elemen tautan adalah seperti ini:

a:link {
  /* deklarasi */
}

a:visited {
  /* deklarasi */
}

a:focus {
  /* deklarasi */
}

a:hover {
  /* deklarasi */
}

a:active {
  /* deklarasi */
}

Anggota Lain CSS Pseudo-Classes

Selektor-selektor pseudo-class di bawah ini tidak digunakan untuk menangani event mouse saat melakukan sesuatu pada elemen, tetapi lebih mengarah kepada sesuatu seperti pemanipulasian atau penyeleksian elemen-elemen yang tidak terseleksi oleh atribut tertentu.

Umumnya, kita akan menyeleksi elemen khusus dengan menambahkan atribut berupa class='' atau id='' untuk menerapkan deklarasi-deklarasi CSS khusus. Namun dengan CSS Pseudo-Class, kita tidak perlu lagi melakukan itu.

:first-child & :last-child

:first-child digunakan untuk menyeleksi elemen yang merupakan anak pertama dari sebuah elemen induk, sedangkan :last-child digunakan untuk menyeleksi elemen yang merupakan anak terakhir dari sebuah elemen induk. Misalnya begini:

<ul>
    <li>Saya adalah anak pertama dari elemen &lt;ul&gt; yang memiliki kelas demo1</li>
    <li>Saya bukan anak pertama/terakhir dari elemen &lt;ul&gt; yang memiliki kelas demo1</li>
    <li>Saya bukan anak pertama/terakhir dari elemen &lt;ul&gt; yang memiliki kelas demo1</li>
    <li>Saya adalah anak terakhir dari elemen &lt;ul&gt; yang memiliki kelas demo1</li>
</ul>

Normalnya, kerangka objek tersebut akan meghasilkan tampilan seperti ini:

  • Saya adalah anak pertama dari elemen <ul> yang memiliki kelas demo1
  • Saya bukan anak pertama/terakhir dari elemen <ul> yang memiliki kelas demo1
  • Saya bukan anak pertama/terakhir dari elemen <ul> yang memiliki kelas demo1
  • Saya adalah anak terakhir dari elemen <ul> yang memiliki kelas demo1

Sekarang kita terapkan kode CSS yang akan memberikan warna biru pada elemen <li> pertama, dan akan memberikan warna merah pada elemen <li> terakhir:

ul li:first-child {color:blue;}
ul li:last-child {color:red;}

Setelah diterapkan maka akan menghasilkan tampilan seperti ini:

  • Saya adalah anak pertama dari elemen <ul> yang memiliki kelas demo1
  • Saya bukan anak pertama/terakhir dari elemen <ul> yang memiliki kelas demo1
  • Saya bukan anak pertama/terakhir dari elemen <ul> yang memiliki kelas demo1
  • Saya adalah anak terakhir dari elemen <ul> yang memiliki kelas demo1

:lang()

:lang digunakan untuk mendefinisikan peraturan yang berbeda terhadap bahasa yang berbeda. Biasanya diterapkan pada elemen <q>.
Sebagai contoh, kita buat sebuah kalimat seperti ini:

<q lang="id">Taufik Nurrohman adalah lelaki paling ganteng sedunia</q>
<q lang="en">Taufik Nurrohman is the most handsome boy in the world</q>

Normalnya, kerangka objek tersebut akan meghasilkan tampilan seperti ini:

Taufik Nurrohman adalah lelaki paling ganteng sedunia

Taufik Nurrohman is the most handsome boy in the world

Sekarang kita terapkan kode CSS yang akan memberikan warna hijau pada elemen <q> dengan atribut lang='id', dan akan memberikan warna jingga pada elemen <q> dengan atribut lang='en':

q:lang(id) {color:green;}
q:lang(en) {color:orange;}

Setelah diterapkan maka akan menghasilkan tampilan seperti ini:

Taufik Nurrohman adalah lelaki paling ganteng sedunia

Taufik Nurrohman is the most handsome boy in the world

  

Berlangganan

Berlangganan: Dapatkan berbagai materi dan informasi seputar dunia pemrograman yang tidak akan pernah bisa kalian dapatkan di buku dan di bangku kuliah.

 7 Komentar

Memuat…

Tautan (link) hidup dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan tautan dengan aman, gunakan kode [url=http://example.com]Teks Tautan[/url]
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE ANDA</i>
Untuk menyisipkan gambar, gunakan kode [img]URL GAMBAR[/img]
Untuk menyisipkan judul, gunakan tag <b rel="h4">JUDUL ANDA DI SINI…</b>
Untuk menciptakan efek tebal gunakan tag <strong>TEKS ANDA DI SINI…</strong>
Untuk menciptakan efek huruf miring gunakan tag <em>TEKS ANDA DI SINI…</em>

Khusus untuk membalas komentar disarankan menggunakan tombol balas di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur. Karena mungkin, apa yang Anda tanyakan/katakan saat ini akan sangat bermanfaat bagi pembaca lain.

:) :( ^_^ :D ;) :bd :'( :\ ;p B) :Q :Ozzz 7:( \o/ **p :* 0:) :a 7:O *fuck* x& x@ ~x( *yaya* =p*

Nama Saya Taufik Nurrohman. Sebenarnya Saya tidak bisa disebut sebagai seorang yang profesional dalam bidang ini, karena Saya tidak menguasai bidang ini melalui pendidikan formal. Saya hanyalah seorang antusias. Dibandingkan sebagai seorang desainer atau pengembang, Saya lebih suka jika disebut sebagai seorang hobiis saja yang tertarik dengan dunia web.

Daftar Tautan

Saya tidak bisa hidup tanpa JavaScript! Aktifkan JavaScript?
Ke atas!