CSS - Pseudo Class

Pada materi kali ini kita akan membahas tentang Pseudo Class, yang digunakan untuk menambahkan efek khusus pada selector. Jika anda pernah melihat jenis perintah atau bahkan sudah menggunakan CSS selector yang diikuti titik dua, jenis itulah termasuk Pseudo Class. Kita telah bekerja dengan berbagai jenis elemen di materi-materi sebelumnya, dan bagaimana kita dapat merancang style mereka. Untuk browser, selain dari IE semuanya sudah support pseudo class gaya mereka.

Contoh konkritnya ketika anda pelajari materi tentang styling links, kita gunakan perintah a:hover pada link, anda dapat mengarahkan link tersebut, anda dapat mengubah style-nya mungkin dengan underline atau mengubah warnanya. Jadi mari kita pelajari beberapa type pseudo class ini

Masih ingat tentang type ini di styling links?

  • :visited – merupakan link yang sudah pernah dikunjungi.
  • :hover - Kursor anda arahkan di atas sebuah link, maka link tersebut berada dalam status hover dan selector ini yang memilihnya.
  • :active – tanda link sudah diclik atau aktif.
<!DOCTYPE html>
<html>
<head>
<style>
a:active {
    background-color: yellow;
}
</style>
</head>
<body>
<a href="http://sixv.com">sixv.com</a>

<p><b>Note:</b>tanda link sudah diclik atau aktif </p>
</body>
</html>

Hasilnya :

pseudo

Note : Tanda link sudah di klik atau aktif.

:first-child - Gunakan class ini untuk menambahkan style khusus ke elemen yang merupakan anak pertama dari beberapa elemen lainnya.

<!DOCTYPE html>
<html>
<head>
<style>
p:first-child {
    background-color: yellow;
}
</style>
</head>
<body>

<p>Contoh paragraf first child(body).</p>

<h1>Welcome to My Homepage</h1>
<p>Sedangkan ini paragraf kedua bukan first child</p>

<div>
  <p>Ini paragraf first child (div).</p>
  <p>Dan yang ini bukan masuk first cild.</p>
</div>
</body>
</html>

Hasilnya :

pseudo2

: focus - Gunakan class ini untuk menambahkan style khusus ke elemen saat elemen memiliki fokus.

<!DOCTYPE html>
<html>
<head>
<style>
input:focus {
    background-color: yellow;
}
</style>
</head>
<body>

<p>Click bagian dalam form untuk melihat background kuning:</p>

<form>
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>
</body>
</html>

Hasilnya :

pseudo3

Beberapa type lainnya anda bisa uji coba:

  • :checked
  • :disabled
  • :empity
  • :enable
  • :firt-child
  • :first-of-type
  • :focus
  • :hover
  • :in-range
  • :invalid
  • :lang(language)
  • :last-child
  • :last-of-type
  • :link
  • :not-selector
  • :nth-child(n)
  • :nth-last-child(n)
  • :nth-last-of-type(n)
  • :nth-of-type(n)
  • :only-child
  • :optional
  • :out-of-type
  • :read-only
  • :read-write
  • :required
  • :root
  • :target
  • :valid
  • :visited

Dari beberapa contoh penggunaan, seperti link, Anda memiliki tautan dan pengguna bisa tahu kalau tautan yang telah dikunjungi. Dan anda bisa bisa melihat style ini bereaksi dari aksi pengguna yang berbeda. Bahkan seseorang mengarahkan kursor pada paragraph yang menggunakan class ini atau tag H1 misalnya, style ini juga bereaksi. Intinya, anda bukan hanya memiliki link, tapi didalamya terdapat style tergantung dari aksi pengguna. Inilah keunikan pseudo class membuat link atau elemen anda yang lainnya menjadi unik.

Bahkan dalam aplikasinya, kita bisa menggunakan pseudo selector seperti menghubungkan class dan id. Lihat contoh ini, kita tidak mau memilih huruf pertama disemua paragraf tapi hanya yang ada di baris pertama, maka gunakan p:first-child:first-letter{}

<!DOCTYPE html>
<html>
<head>
<style>
p:first-child:first-letter {
    background-color: yellow;
}
</style>
</head>
<body>

<p>Contoh paragraf first child Huruf pertama(body).</p>

<h1>Welcome to My Homepage</h1>
<p>Sedangkan ini paragraf kedua bukan first child</p>

<div>
  <p>Ini paragraf first child dengan huruf pertama (div).</p>
  <p>Dan yang ini bukan masuk first cild.</p>
</div>
</body>
</html>

Hasilnya :

pseudo4

Dan satu lagi yang anda harus paham bahwa kadang anda akan menemukan tanda ::. Selector yang menggunakan :: disebut pseudo element, selekto ini tidak benar-benar memilih sebuah elemen utuh. Misalnya

::before – pseudo ini berfungsi dalam menambah konten tertentu sebelum suatu elemen. Misal, menambahkan tanda petik sebelum sebuah blockquote.